JavaScript: Как предотвратить dblclick (Двойной щелчок), чтобы также инициировать событие одного клика

Question

Я хочу, чтобы двойной щелчок также не вызывал событие одиночного щелчка.

Простое решение, которое я нашел, состоит в том, чтобы отложить щелчок таймером и уничтожить таймер, если двойной щелчок сработал.

var pendingClick;

function myclick(){
   clearTimeout(pendingClick);
   pendingClick = setTimeout(function(){
      console.log('click');
   }, 500);
}

function mydblclick(){
  clearTimeout(pendingClick);
  console.log('double click');
}

<div onclick="myclick()" ondblclick="mydblclick()">Double Click Me!</div>

Но это решение основано на синхронизации, если двойной щелчок слишком медленный (> 500 мс), он также запускает один щелчок.

Есть стабильное решение для обработки как клика, так и двойного клика?

Answer 1

Работайте только с функцией «onclick», чтобы проверить, был ли это один или два щелчка, и используйте переменную для подсчета количества щелчков за данный интервал времени.

Пример:

var pendingClick;
var clicked = 0;
var time_dbclick = 500 // 500ms

function myclick(){
  clicked++;
   if(clicked >= 2){
     mydblclick()
     clearTimeout(pendingClick)
     clicked = 0;
     return;
   }
   clearTimeout(pendingClick)
   pendingClick = setTimeout(() => {
     console.log('One click!')
     clicked = 0;
   }, time_dbclick);
}



function mydblclick(){
  console.log('double click');
}

<div onclick="myclick()">Double Click Me!</div>

Answer 2

Вы можете получить событие и отменить его с помощью addEventListener следующим образом:

document.addEventListener('dblclick', (event) => { 
    event.preventDefault();  
    event.stopPropagation(); 
}, true); // With this true, you are cancelling the dblclick event

let pendingClick;

function myclick(){
    clearTimeout(pendingClick);
    pendingClick = setTimeout(function (){
        console.log('click');
    }, 500);
}

function mydblclick(){
    clearTimeout(pendingClick);
    console.log('double click');
}

<div onclick="myclick()" ondblclick="mydblclick()">Double Click Me!</div>

Answer 3

Двойной щелчок сам по себе "основан на времени", даже в стандартной реализации dblclick / ondblclick. Всегда будет проблема срабатывания одного щелчка, если двойной щелчок «слишком медленный». Что такое "слишком медленно"? 300мс? 500мс? 1000мс? Ваши двойные щелчки могут находиться на расстоянии всего 50 мс, а двойные щелчки моей мамы - на расстоянии 1-2 секунды ...