How to differentiate single click event and double click event?

Question

I have a single button in li with id "my_id". I attached two jQuery events with this element

1.

$("#my_id").click(function() { 
    alert('single click');
});

2.

$("#my_id").dblclick(function() {
    alert('double click');
});

But every times it gives me the single click

Answer 1

The behavior of the dblclick event is explained at Quirksmode.

The order of events for a dblclick is:

1. mousedown
2. mouseup
3. click
4. mousedown
5. mouseup
6. click
7. dblclick

The one exception to this rule is (of course) Internet Explorer with their custom order of:

1. mousedown
2. mouseup
3. click
4. mouseup
5. dblclick

As you can see, listening to both events together on the same element will result in extra calls to your click handler.