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>

但是此解决方案基于计时，如果双击过慢（> 500ms），还会触发一次单击。

有一个稳定的解决方案可以同时处理单击和双击吗？

Answer 1

双击本身是基于时间的，即使在dblclick / ondblclick的标准实现中也是如此。如果双击“太慢”，总是会触发单击。什么是“太慢”？ 300毫秒？ 500毫秒？ 1000毫秒？您的双击间隔可能只有50毫秒，而我妈妈的双击间隔是1-2秒...

Answer 2

仅可与“ 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 3

您可以获取事件并使用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>

JavaScript：如何防止dblclick（Double Click）也触发一次单击事件

3 个答案: