Как добавить два разных действия (например, клик и двойной клик) к одному элементу?

Question

Василий

javascript

Как добавить два разных действия (например, клик и двойной клик) к одному элементу?

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

2 апреля 2024 г. 22:29

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для добавления двух разных действий к одному элементу можно использовать методы `addEventListener` и `event.preventDefault()` для предотвращения выполнения действия по умолчанию при двойном клике. 

Пример кода:

```javascript
const cell = document.querySelector('.cell');

cell.addEventListener('click', function() {
    // действие при одиночном клике (выделение)
    this.style.backgroundColor = 'yellow';
});

cell.addEventListener('dblclick', function(event) {
    // предотвращение выполнения действия по умолчанию при двойном клике
    event.preventDefault();
    
    // другое действие при двойном клике
    alert('Двойной клик!');
});
```

Таким образом, при клике на ячейку будет происходить выделение (изменение цвета фона), а при двойном клике будет появляться сообщение "Двойной клик!". 

Для того чтобы оба события работали корректно, необходимо использовать `event.preventDefault()` при обработчике события `dblclick`, чтобы предотвратить выполнение действия по умолчанию браузера (в данном случае - выделение текста).

Answer 2

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