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

Question

Как это сделать?

Answer 1

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

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

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); 
}); 

А вот example of it at work.

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

Answer 2

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

Answer 3

Raymond Chen обсудил некоторые из implications of single-versus-double clicking - хотя он говорит в контексте Windows, то, что он говорит, имеет отношение к дизайну пользовательского интерфейса на основе браузера.

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

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

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

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

Answer 4

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

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

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

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

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

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

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

Answer 5

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

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