如何通过仅注册click事件来检测双击元素

Question

I can't use event dblClick I can add event listener only to click event.
Is it possible to detect double click on element () with registering only click event?
I add event like:

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

Answer 1

This will work and you can adjust your timeout to suit your needs.

 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

In case of impossibility to use double click event listener, you can try to use last click flag and timeout to check if next click happens in short period of time. If it happens then it is signal of double click. Something like this:

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

You need to set delay of setTimeout depending on your own situation

Answer 3

The code below adds an event listener to the button that goes away after 300 milliseconds. So when the button isn't pressed twice within 300 ms, the inner function doesn't fire.

 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>