Как на один элемент повесить два события, клик и двойной клик?

Question

[Nichosi]

this.content.querySelectorAll('.cell').forEach((cell) => {
   cell.addEventListener('click', handleClickCell);
   cell.addEventListener('dblclick', () => {
      console.log('111');
   });
});

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

Answer 1

[alexalexes]

this.content.querySelectorAll('.cell').forEach((cell) => {
  let timer = null; // дескриптор отложенного обработчика одного клика
  cell.addEventListener('click',  (e) => {
     if(timer)
       clearTimeout(timer); // при каждом клике сбрасываем отложенный обработчик обработки одного клика
     if(e.detail == 1) // на первом клике устанавливаем отложенный обработчик
       timer = setTimeout(handleClickCell, 250); // Выполнение функции по одинарному клику после ожидания второго клика 250мс
     if(e.detail == 2) // на втором - выполнение обработчика двойного клика
     {
        // благодаря счетчику detail в ивенте можем посчитать длину очереди непрерывных кликов, и в нужный момент выполнить функцию на втором клике
        console.log('111');
     }
    } );
});

Comments

[Nichosi]

Круто! Спасибо большое!