如何通過註冊單擊事件來檢測元素的雙擊

Question

我不能使用事件dblClick我只能將事件偵聽器添加到click事件。
是否有可能通過僅註冊單擊事件來檢測元素（）的雙擊？
我喜歡添加事件：

for (var i....)... { 
...addEventListener('click', function(event) 

Answer 1

在不可能使用雙擊事件偵聽器的情況下，你可以嘗試用最後點擊標誌和超時檢查，如果接下來點擊發生在較短的時間內。如果發生，那就是雙擊信號。事情是這樣的：

var dblClickCheck = false; 
var timeout; 

element.addEventListener('click', function() { 

    if(timeout){ 
     clearTimeout(timeout); 
    } 

    if(dblClickCheck){ 
     alert('double click'); 
     return; 
    } 

    dblClickCheck = true; 

    timeout = setTimeout(function() { 
     dblClickCheck = false; 
    }, 200); 

}, false); 

你需要設置的setTimeout延遲根據你自己的情況

Answer 2

這會，但工作，你可以調整你的超時時間，以滿足您的需求。

function makeDoubleClick(doubleClickCallback, singleClickCallback) { 
 
    var clicks = 0, timeout; 
 
    return function() { 
 
     clicks++; 
 
     if (clicks == 1) { 
 
      singleClickCallback && singleClickCallback.apply(this, arguments); 
 
      console.log('single click'); 
 
      timeout = setTimeout(function() { clicks = 0; }, 400); 
 
     } else { 
 
      timeout && clearTimeout(timeout); 
 
      console.log('double click'); 
 
      doubleClickCallback && doubleClickCallback.apply(this, arguments); 
 
      clicks = 0; 
 
     } 
 
    }; 
 
} 
 

 
document.getElementById('btn').addEventListener('click', makeDoubleClick(), false);

<button id='btn'> 
 
    Click Me 
 
</button>

Answer 3

下面的代碼添加一個事件偵聽到雲後300毫秒離開按鈕。因此，在300毫秒內沒有按下按鈕兩次時，內部功能不會觸發。

var button = document.getElementById("dbl_click"); 
 

 
var outerFunction = function(event) { 
 
    button.addEventListener('click', innerFunction); 
 
    setTimeout(function(){ button.removeEventListener('click', innerFunction) }, 300); 
 
}; 
 

 
var innerFunction = function(event) { 
 
    alert("double clicked!"); 
 
} 
 

 
button.addEventListener('click', outerFunction);

<div> 
 
<button id="dbl_click">Double click me!</button> 
 
</div>