Listen to double click not click

Question

I\'m just wondering why click event happening when I dbclick an element?

I have this code:(JSBIN)

HTML

&l         


        

Answer 1

Use dblclick instead of dbclick.

Answer 2

This works for me (using the d3 library, but d could also be a dictionary object):

function log(s){try{console.log(s)}catch(e){}} // for debugging

var click_d = null

function click(d){
    log("click")
    click_d = d
    setTimeout(click_action, 200)
}

function click_action(){
    log("click_action")
    if(click_d == null){
        log("aborted")
        return
    }
    d = click_d

    // do things with d
}

function doubleclick(d){
    log("dblclick")
    click_d = null

    // do things with d
}

Answer 3

Change 'dbclick' to 'dblclick'.

Answer 4

dblclick is not magical: though the second rapid click fires the dblclick event, the first click has already triggered its own event handler.

You should pretty much never set both a click and a dblclick event on a DOM element; when you do, you'll need fancy tricks with timers to mitigate the issue.

In this specific scenario, you'll also need to fix your typo (s/dbclick/dblclick/) to get the event to fire at all.

^{Also note that dblclick is not actually part of the DOM specification at all (not present in DOM Level 2 1.6.2). For this reason it's known as a "DOM Level 0" feature.}

Answer 5

I would suspect you are working on slow computer. On a slow computer double click could be interpreted as two single click with significant time in between. You can experiment with mouse setting and change the double click setting. That should troubleshoot the problem. If you are computer is really fast and has no lag issue, your problem could be somewhere else. It is very unlikely that double click could be taken as single click as code bug (the one you posted). Problem could be elsewhere if not slowness of the computer.

Answer 6

To answer the revised question (How to mutually exclusively handle click and dblclick) you have to delay the click event until dblclick is no longer possible. This gives a slight lag (e.g., 500ms) to click handling but otherwise there is no way for the DOM to predict whether a second click will be arriving.

An example script is in this answer: https://stackoverflow.com/a/11057483/43217