How to deal with click and dblclick event bind on same dom in Javascript

Question

I want to bind click and dblclick event on same DOM, but dblclick always active click event. How to do that two events don't influence each other!

Answer 1

Wait to respond to the click by a tiny amount via setTimeout, and don't do the click action if you see the double-click. Unfortunately, the timing is pretty tricky — too little and you get the click when you shouldn't, too much and clicks really lag.

const div = document.getElementById("the-div");
let clickTimer = 0;
div.addEventListener(
    "click",
    function () {
        clearTimeout(clickTimer);
        clickTimer = setTimeout(function () {
            console.log("clicked");
            clickTimer = 0;
        }, 250);
    },
    false
);
div.addEventListener(
    "dblclick",
    function () {
        clearTimeout(clickTimer);
        console.log("double-clicked");
    },
    false
);

#the-div {
    user-select: none;
}

<div id="the-div">Click and/or double-click me</div>

Answer 2

if you use jquery, you can extend the jquery plugin. Using the javascript's non-blocking feature, and callback feature to handle this question. You can try this plugin: https://github.com/sgyyz/jquery-oneordoubleclick which apply for your jquery module.

$target_node.oneordoubleclick({oneclick: function(){
    console.log('you have click this node.');
   }, dbclick: function() {
    console.log('you have double click this node.');
   }
});

Answer 3

Here's a demo using setTimeout that you can handle your click and dblclick events separately. Using a bool variable you can decide if it's a single click or double click and create handler accordingly.

HTML :

<div>Bingo</div>

CSS :

div{
    width : 100px;
    height : 100px;
    background-color: blue;
}

javaScript :

var div = document.getElementsByTagName("div")[0];
var isSingleClick = true;
div.onclick = function(){
    setTimeout(function(){
        if(isSingleClick){
            console.log("Click");
        }
    }, 500);
};

div.ondblclick = function(){
    console.log("DBLClick");
    isSingleClick = false;
    setTimeout(function(){
        isSingleClick = true;
    }, 500);
};

jsFiddle