如何通過僅注冊click事件來檢測雙擊元素

Question

我不能使用事件dblClick我只能將事件偵聽器添加到click事件。
是否可以通過僅注冊click事件來檢測對元素（）的雙擊？
我添加事件，如：

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

Answer 1

這將起作用，您可以調整超時以適合您的需求。

 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 2

如果無法使用雙擊事件偵聽器，則可以嘗試使用“最后點擊”標志和超時來檢查是否在短時間內發生了下次點擊。 如果發生，則表示雙擊。 像這樣：

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 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>