Как разделить двойной и одиночный клики по элементу?

Question

[Святослав Хусамов]

При двойном клике по элементу генерируется три события click, click и dblclick.
А нужно чтобы при двойном клике срабатывал обработчик двойного клика. А одиночный при этом не срабатывал. И наоборот.

Как решить эту проблему?

Answer 1

[Dark Hole]

ClickEvent.detail?
UPD: В вашем случае, вам нужно выждать некоторое время, между которым может произойти dblclick.

Код

var id = 0;
el.on('click', function(e) {
  if(e.detail == 0) id = setInterval(function() {
    ...
  }, 500);
  else clearInterval(id);
});

Comments

[Святослав Хусамов]

Спасибо! Вроде действительно то что нужно. Если никаких побочек не будет))), то это отличное решение проблемы.

[Святослав Хусамов]

Хотя нет, что не так работает как хотелось бы
При двойном клике такая картина
click 1
click 2
dblclick 2

Здесь цифра в конце это detail

[Dark Hole]

Святослав: игноируйте либо click с detail >= 2, либо dblclick. Очевидно же.

[Святослав Хусамов]

Dark Hole: Событие click detail=1 мне тоже надо обрабатывать. В этом то и проблема. Причем нельзя, чтобы он срабатывал при двойном клике. А сейчас при двойном клике срабатывают оба обработчика.

[Dark Hole]

Святослав:

....on('click', function(e) {
  if(e.detail > 1) return;
  ....
})

[Святослав Хусамов]

Dark Hole: Вы меня не понимаете. Я выше написал, что при двойном клике генерирует СРАЗУ три события. Клик, клик и даблклик. Причем первый клик содержит detail==1. Вот как его проигнорировать?

[Dark Hole]

Святослав: ааааа, сразу бы сказали, что вам надо оба клика, относящиеся к dblclick проигноировать.

[Святослав Хусамов]

Dark Hole: можно и так сказать. В общем первое событие не ясно как интерпретировать. В нем нет информации о том, что будет дальше - будет ли второй клик или не будет - неизвестно.

[Dark Hole]

Святослав: дополнил ответ.

[Святослав Хусамов]

Dark Hole: Спасибо. Сложная хрень выходит.

[Святослав Хусамов]

Dark Hole: В коде у вас ошибка. Переписал без ошибок. И 150 достаточно для гугл хрома. А то 500 мс это заметная задержка.

var id = 0;
el.on('click', function(e) {
  if(e.detail == 1) id = setInterval(function() {
    ...
  }, 150);
  else clearInterval(id);
});

[Dark Hole]

Святослав: 500 - это от ума. Время, в котором может произойти dblclick определяется в системных настройках(в Windows и Linux - точно, за MacOS не ручаюсь).

[Святослав Хусамов]

Dark Hole: точно. Тогда для win10 с настройками по умолчанию нужен таймаут 150-200. К сожалению 150 с натягом. Не всегда удается так быстро прокликать. В общем решение хорошее, но с недостатком. Не ясно, как этот таймаут получить из ОС.