1

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Denis
  • 2,429
  • 5
  • 33
  • 61
  • This is a bad idea ... it can be done but using timeouts -> http://stackoverflow.com/questions/1067464/need-to-cancel-click-mouseup-events-when-double-click-event-detected/1067484#1067484 i suggest you find a better way of handling 2 different events on a single element – Manse Mar 05 '12 at 16:14
  • Keep time between click in a global context and check if the time is less than X in your single click function and return false from single click function if the time is within range. – Milo LaMar Mar 05 '12 at 16:21

2 Answers2

4

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)

Chris Pratt
  • 232,153
  • 36
  • 385
  • 444
  • +1 was trying to find an "official" definition like this ... never a good idea to mix these 2 ... – Manse Mar 05 '12 at 16:15
  • thanks for the advice, but I still need to do it, becouse if someone clicks too fast on my element, the animation does not have time to complete iteration and it looks awful. Then at least I need to put the interval after the first click. For example, make it impossible to click on the item for 1 second again, after the first click. Is that possible? – Denis Mar 05 '12 at 16:28
  • thanks a lot, guys, this solved my problem! [link](http://stackoverflow.com/questions/1067464/need-to-cancel-click-mouseup-events-when-double-click-event-detected/1067484#1067484) – Denis Mar 05 '12 at 16:35
0

What you are doing in your question, is exactly how it should be done.

$(".test").click(function() {
      $("body").append("you clicked me<br />");
});

$(".test").dblclick(function() {
      $("body").append("you doubleclicked me<br />");
});

It works and here is an demo for that.

Since, you want to detect separate single double click. There is a git project for this.

$("button").single_double_click(function () {
  alert("Try double-clicking me!")
}, function () {
  alert("Double click detected, I'm hiding")
  $(this).hide()
})

It adds up events to detect single double clicks.

Hope it helps you now.

Starx
  • 77,474
  • 47
  • 185
  • 261
  • not sure if that exactly what i need, becouse there in the comments people say it don't want to work with jQuery .live() event, and i have to use it :) but thanks and let me check this – Denis Mar 05 '12 at 16:57