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

<p id="hello">Hello World</p>

JavaScript

document.getElementById('hello').addEventListener('click', function(e){
  e.preventDefault();
  this.style.background = 'red';
}, false);
document.getElementById('hello').addEventListener('dbclick', function(){
  this.style.background = 'yellow';
}, false);

It should do different things for click and double click, but it seems when you double click on the p it catch click event in advance and ignore double click.

I tried preventDefault the click event too. How can I listen to just dbclick?

UPDATE

I had a typo in my code. dbclick is wrong. It's dblclick. Anyway the problem still exist. When user double clicks the click event happens.

This is updated code that prove it:(JSBin)

document.getElementById('hello').addEventListener('click', function(e){
  e.preventDefault();
  this.style.background = 'red';
  this.innerText = "Hello World clicked";
}, false);
document.getElementById('hello').addEventListener('dblclick', function(){
  this.style.background = 'green';
}, false);

This question made because of a typo. I wish I could delete it! — Mohsen, Oct 26 '11 at 01:00
Why?! There are some other important points raised in the answers. Please don't ignore the advice given just because you made a typo. The question "How can I listen to _just_ `dblclick`" is _not_ solved by fixing your typo. — Lightness Races in Orbit, Oct 26 '11 at 01:01
@TomalakGeret'kal do you think `stopPropagation` would help here? — Mohsen, Oct 26 '11 at 01:10
Nope. (Doing _anything_ in the `click` event can't change what happens depending on whether `dblclick` goes on to happen _later_, short of invoking a magical time-travel function.) My answer is comprehensive. Sorry. — Lightness Races in Orbit, Oct 26 '11 at 01:11

Lightness Races in Orbit · Accepted Answer · 2011-10-26T00:58:56.650

19

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

edited Oct 26 '11 at 00:58

answered Oct 26 '11 at 00:53

Lightness Races in Orbit

378,754
76
643
1,055

I've had no problems using both with some simple cases, e.g., single-click means the user has selected some item in a list, so perhaps display more info about that item and/or enable an associated button, while double-click means auto-click the associated button. – nnnnnn Oct 26 '11 at 00:57
@nnnnnn: In that scenario, perhaps double-selection was transparent to the user. The same would probably be true for the OP's specific scenario, but it's no general rule. – Lightness Races in Orbit Oct 26 '11 at 01:00
+1, and going to the JSBIN and fixing the `dbclick` to be `dblclick` it does just what I expect: turns red from the click event then yellow from the dblclick event. – Stephen P Oct 26 '11 at 01:00

score 13 · Answer 2 · edited Oct 26 '11 at 00:59

13

Change 'dbclick' to 'dblclick'.

edited Oct 26 '11 at 00:59

Mohsen

64,437
34
159
186

answered Oct 26 '11 at 00:52

Josh

12,448
10
74
118

score 5 · Answer 3 · edited Nov 18 '11 at 01:48

5

Use dblclick instead of dbclick.

edited Nov 18 '11 at 01:48

chown

51,908
16
134
170

answered Oct 26 '11 at 00:55

michaeljdennis

602
1
7
12

score 2 · Answer 4 · edited May 23 '17 at 12:09

2

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

edited May 23 '17 at 12:09

Community

1
1

answered Jun 18 '12 at 18:15

mckamey

17,359
16
83
116

score 2 · Answer 5 · answered May 02 '14 at 16:30

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
}

score -3 · Answer 6 · answered Oct 26 '11 at 01:11

-3

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.

answered Oct 26 '11 at 01:11

TheTechGuy

16,560
16
115
136

-1: Execution time isn't particularly relevant, other than that it exists; you'll still get at least the initial `click` event. A downvote here _may_ be a little harsh, but I think it can probably be taken as read that the OP knows what a double click feels like on his computer. – Lightness Races in Orbit Oct 26 '11 at 01:16

Listen to double click not click

UPDATE

6 Answers6

Linked

Related