如何避免在瀏覽器JavaScript中對雙擊進行（單次）鼠標單擊處理？

Question

如果用戶雙擊一個HTML按鈕， 單 click事件偵聽獲取雙擊事件偵聽器之前調用。

有沒有一種方法可以跳過雙擊（而不通過箍跳）上的單擊處理？

請記住，如果用戶不雙擊， 我希望能夠對單擊做出反應 ！

在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

這是一個解決方案

我不知道是否有適當的方法，但是可以。 這個想法是在點擊之間保留一個計時器，您禁止任何點擊的速度都比這快。 這意味着在雙擊時，將注冊第一次單擊，但是第二次單擊太快將被忽略。

當然，您可以在一個不錯的功能后面對此進行抽象，但是您明白了。

您修改的代碼：

// 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：我還修改了您的點擊代碼，以將“ clicked”添加到按鈕，因此您可以看到雙擊不會兩次添加。