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

Question

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

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

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

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

Answer 2

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

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

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

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

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

Answer 3

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

Answer 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, так что вы можете смело брать из него все, что вам нужно, не беспокоясь!:-) Он также активно развивается изо дня в день, поэтому у вас никогда не будет недостатка в поддержке.

Но самое главное — это DRY Plugin/Effect Framework, который позволяет вам гораздо проще разрабатывать плагины и расширения.Надеюсь, это поможет достичь этой цели!

Answer 5

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

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