如何避免（單一）鼠標點擊處理瀏覽器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：我也修改了自己的點擊代碼添加「點擊」的按鈕，這樣你就可以看到，雙擊不加兩次。