如何避免（单一）鼠标点击处理浏览器JavaScript中的双击？

Question

如果用户double单击HTML按钮，则单击事件侦听器将在双击事件侦听器之前被调用。

有没有一种方法可以跳过单击处理双击（没有跳过箍）？

请记住，如果用户没有双击，我希望能够对单击做出反应！

看一看不言自明的sample at jsfiddle.net。

myEventButton.addEventListener(
    'click', 
    function(/*e*/) 
    { 
     myClickDiv.innerHTML = 'Clicked.'; // Gets here first on double click. 
    }); 

myEventButton.addEventListener(
    'dblclick', 
    function(/*e*/) 
    { 
     myDblClickDiv.innerHTML = 'Double clicked.'; // Gets here last on double click. 
    }); 

Answer 1

这里是a solution

我不知道是否有做这件事的正确方法，但这个工程。这个想法是在点击之间保留一个计时器，并且你禁止任何点击比这更快。这意味着双击时，第一次点击将被注册，但第二次点击太快会被忽略。

当然，你可以将它抽象为一个很好的函数，但你明白了。

您的修改后的代码：

// Added variables to store timers 
var minTimeBetweenClicks = 1000; 
var lastClickTime = Date.now(); 

myClearButton.addEventListener(
    'click', 
    function() 
    { 
     myClickDiv.innerHTML = ''; 
     myDblClickDiv.innerHTML = ''; 
    }); 

myEventButton.addEventListener(
    'click', 
    function(/*e*/) 
    { 
     // Check the timer before doing anything 
     if (Date.now() - lastClickTime > minTimeBetweenClicks) { 
     myClickDiv.innerHTML += ' Clicked.'; 
     lastClickTime = Date.now(); 
     } 
    }); 

myEventButton.addEventListener(
    'dblclick', 
    function(/*e*/) 
    { 
     myDblClickDiv.innerHTML = 'Double clicked.'; 
    }); 

PS：我也修改了自己的点击代码添加“点击”的按钮，这样你就可以看到，双击不加两次。