Клик и двойной клик
Вот пример...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.on {
background-color: green;
}
</style>
<script type="text/javascript">
$(function (){
$('li').click(function (){
if (this.className=='on') {
action();
} else {
select(this);
};
});
$('li').dblclick(function (){
select(this);
action();
});
});
function select(Obj) {
$(Obj.parentNode).find('li').removeClass('on');
Obj.className='on';
};
function action() {
alert('Action!')
};
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
При клике элемент либо выделяется... Либо срабатывает "экшн", если элемент уже выделен... На двойной клик навешено выделение и запуск экшна... Но при таком раскладе при двойном клике выполняется клик+клик+двойной_клик и экшн запускается два раза. Как обойти это? Пока решил проблему через переменную... :( Но это не нравится... Есть еще какие варианты? |
Ну убери вообще dblclick и будет то что надо...
|
ksa,
:write:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.on {
background-color: green;
}
</style>
<script type="text/javascript">
$(function (){
$('ul').on('click','li:not(".on")',function (){
select(this)
});
$('ul').on('click','.on',function (){
action();
});
});
function select(Obj) {
$(Obj.parentNode).find('li').removeClass('on');
$(Obj).addClass('on');
};
function action() {
alert('Action!')
};
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
|
Цитата:
|
рони, принято как рабочий вариант... :yes:
А как-то "остановить" события не получится? |
Цитата:
пока укороченный вариант ...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.on {
background-color: green;
}
</style>
<script type="text/javascript">
$(function (){
$('ul').on('click','li',function (){
$(this).hasClass('on') ? action():select(this)
});
});
function select(Obj) {
$(Obj).addClass('on').siblings().removeClass('on');
};
function action() {
alert('Action!')
};
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
|
Цитата:
|
ksa, еще можно так:
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<style>.on{background-color:green;}</style>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
$(function (){
$('li').click( { p: 0 }, function(e) {
if (e.data.p == this) {
alert('Action!');
return;
}
if (e.data.p) e.data.p.className = '';
this.className = 'on';
e.data.p = this;
});
});
</script>
|
Rise, спасибо. :) Переделал все по первому варианту рони...
|
Цитата:
В ИЕ двойной клик это "отдельное" событие... И там по двойному клику все эти примеры не запустят экшн. :( |
ksa,
как вариант можно поменять click в моём коде на mouseup, а так да двойной клик везде 3 события click - click - dblclick в старых ие только 2 click - dblclick |
Цитата:
|
Да рони прав, IE опять отличился, на mouseup всё OK.
|
Цитата:
Есть "мудрецы" - нажимают мышу на одном элементе, а отпускают на другом... :-E Но все спасибо все равно. :yes: |
Цитата:
|
Цитата:
Нажал и пошел экшн! А кнопка даже не отпущена... Это нормально? |
ksa, при mousedown сохраняешь ссылку на элемент в переменной, при mouseup проверяешь переменную если она не пустаю то выполняешь экшн для того элемента, потом очищаешь переменную
|
Цитата:
Т.ч. весь вопрос был в том, как сделать без переменной. |
Цитата:
Пока такое сочетание нравится больше всего. :) Еще раз спасибо. :yes: |
| Часовой пояс GMT +3, время: 16:45. |