Необходимо отменить события click/mouseup при обнаружении двойного щелчка

Ответ 1

Это хороший вопрос, и я действительно не думаю, что это можно сделать легко. (Некоторая дискуссия об этом)

Если для вас важна супер-пупер, вы можете взломать ее так:

function singleClick(e) {
    // do something, "this" will be the DOM element
}

function doubleClick(e) {
    // do something, "this" will be the DOM element
}

$(selector).click(function(e) {
    var that = this;
    setTimeout(function() {
        var dblclick = parseInt($(that).data('double'), 10);
        if (dblclick > 0) {
            $(that).data('double', dblclick-1);
        } else {
            singleClick.call(that, e);
        }
    }, 300);
}).dblclick(function(e) {
    $(this).data('double', 2);
    doubleClick.call(this, e);
});

И вот пример этого на работе.

Как указано в комментариях, для этого есть плагин, который делает то, что я делал выше, в значительной степени, но пакеты его для вас, поэтому вам не нужно видеть уродливые: FixClick.

Ответ 2

Раймонд Чен обсудил некоторые из последствий однократного щелчка - хотя он говорит в контексте Windows, что он говорит имеет отношение к дизайну пользовательского интерфейса на основе браузера.

В принципе, действие, выполняемое двойным щелчком, должно быть логичным, что нужно сделать после одного щелчка. Так, например, в пользовательском интерфейсе рабочего стола один клик выбирает элемент, а двойной щелчок открывает его (например, открывает файл или запускает приложение). Пользователь должен будет выбрать файл, чтобы открыть его в любом случае, поэтому не имеет значения, что действие одного клика выполняется перед действием двойного щелчка.

Если у вас есть компонент пользовательского интерфейса, действие двойного щелчка которого полностью не связано с действием одного клика, так что возникает необходимость предотвратить однократное действие, когда система понимает, что это фактически двойной щелчок, тогда вы действительно должны переосмыслить свой дизайн. Пользователи будут находить это неудобным и противоречивым, поскольку оно не будет действовать так, как они привыкли к действиям.

Если вы все еще хотите пойти по этому пути, вам придется либо использовать метод debouncing (в этом случае все действия с одним кликом будут отложены), либо реализовать какой-либо механизм, благодаря которому обработчик с двойным щелчком отменяет работу, выполняемую обработчик одного клика.

Вы также должны знать, что некоторые пользователи установили очень длительное время двойного щелчка. У кого-то, у которого, например, у артритных рук может быть двойное нажатие более чем второго набора в их системных предпочтениях, поэтому метод debouncing, основанный на каком-то произвольном временном периоде по вашему выбору, сделает ваш компонент пользовательского интерфейса недоступным для этих людей, если принятие одного действия по щелчку исключает принятие действия двойного щелчка. Насколько мне известно, метод "отменить то, что только что произошло с одним щелчком" является единственным жизнеспособным обходным путем.

Ответ 3

Техника, описанная в других ответах, называется debouncing.

Ответ 4

jQuery Sparkle обеспечивает чистое элегантное решение для этого, реализуя однозадачное пользовательское событие. Делая это, вы можете использовать его так же, как любое другое событие, поэтому:

$('#el').singleclick(function(){});
// or event
$('#el').bind('singleclick', function(){});

Он также предоставляет настраиваемые события для последнего и первого щелчков серии кликов. И пользовательское событие lastclick фактически передает количество кликов обратно! Таким образом, вы могли бы сделать это!

$('#el').lastclick(function(event,clicks){
    if ( clicks === 3 ) alert('Tripple Click!');
});

Вы можете найти исходный код для определения настраиваемого события здесь.

Он с открытым исходным кодом под лицензией AGPL, поэтому вы можете свободно брать все, что вам нужно, без проблем!:-) Он также активно развивается на повседневной основе, поэтому вы никогда не будете краткими в поддержке.

Но самое главное, это СУХОЕ Плагин/Эффект Framework, позволяющий вам гораздо легче разрабатывать плагины и расширения. Поэтому надеюсь, что это поможет достичь этой цели!

Ответ 5

Если это для кнопки, представляющей форму (что не обязательно относится к оригинальному плакату, но может быть и для других людей, приезжающих сюда через Google), более простым вариантом было бы отключить элемент, который является нажмите в обработчике событий click:

$(selector).click(function(e) {
    $(this).prop('disable', true);
}