如何通过注册单击事件来检测元素的双击

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>