Question

How can I define in jQuery was it a regular click on the same element or double-click?

For example we have element like this:

<div id="here">Click me once or twice</div>

And we need to perform different actions after regular click and double-click.

I tried something like this:

$("#here").dblclick(function(){
    alert('Double click');
});
$("#here").click(function(){
    alert('Click');
});

But, of course, it doesn’t work, everytime works only ‘click’.

Then, some people showed me this:

var clickCounter = new Array();
$('#here').click(function () {
clickCounter.push('true');
setTimeout('clickCounter.pop()', 50);
if (clickCounter.length > 2) {
    //double click
    clickCounter = new Array(); //drop array
} else {
    //click
    clickCounter = new Array(); //drop array    !bug ovethere
}
});

Here we tried to set the interval between clicks, and then keep track of two consecutive events, but this have one problem.. it doesn’t work too.
So, someone knows how to do this? or can someone share a link to the material, where I can read about it?

Answer 1

From QuirksMode:

Dblclick

The dblclick event is rarely used. Even when you use it, you should be
sure never to register both an onclick and an ondblclick event handler
on the same HTML element. Finding out what the user has actually done
is nearly impossible if you register both.

After all, when the user double–clicks on an element one click event
takes place before the dblclick. Besides, in Netscape the second click
event is also separately handled before the dblclick. Finally, alerts
are dangerous here, too.

So keep your clicks and dblclicks well separated to avoid
complications.

(emphasis mine)