Определить двойной клик

Question

На элемент выставлен слушатель, точнее функция которая срабатывает при клике на элемент.

Вопрос стоит в том, какой механизм лучше для того, чтобы определить двойной клик был либо один. Чтобы запустить одно действие при двойном клике и другое при одном.

И тут же как, допустип плеер. Пользователю возможно необходимо перемотать, для этого необходимо кликать 3 раза по одной из сторон, перемотать на 5-10 и тд секунд. Возможно пользователь хочет развернуть плеер на весь экран, для этого кликает дважды. Либо поставить или запустить воспроизведение, кликает один раз.

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

Answer 1

Как вариант, разделять логику для одного клика и для двойного

element.addEventListener('click', () => {
  // логика при ОДНОМ клике
})

element.addEventListener('dblclick', () => {
  // логика при ДВОЙНОМ клике
});

https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event

Answer 2

Интересная идея... Может быть вот так?:

let el = document.querySelector('#click_here')
let isDoubleClick = false

el.addEventListener('click', onClick)
el.addEventListener('dblclick', onDoubleClick)

function onClick() {
  setTimeout(() => {
    if(!isDoubleClick) {
      console.log('Одиночный клик')
    }
  }, 200)
}

function onDoubleClick() {
  isDoubleClick = true

  console.log('Двойной клик')

  setTimeout(() => {
    isDoubleClick = false
  }, 210)
}

#click_here {
  outline: 5px dashed red;
  width: 100px;
  height: 100px;
  text-align: center;
}

<div id="click_here">Нажимайте вот сюда</div>

Объяснение

Сначала объявляем переменные, одна для самого нашего элемента, другая для проверки на двойной клик. Далее добавляем слушатели обычного и двойного клика, при клике ждём 200 миллисекунд, если двойной клик не сработал, значит это обычный клик. При двойном клике меняем переменную isDoubleClick на true, т.к. это двойной клик и запускаем наш функционал и через 210 миллисекунд меняем переменную isDoubleClick на false чтобы обыкновенный клик смог сработать.

БЛОГ НА HUSL

Определить двойной клик

Ответы (2 шт):

Объяснение