double click using IE

Question

I have discovered a double-click problem in IE.

The following is my HTML:

<div id="test">Hello World!</div>

And my jQuery:

$('#test').bind('dblclick', function (event) {
    event.stopPropagation();
    $(this).css({'background-color': 'red'});
});

In IE, do the following:

1. Outside the DIV, mouse down → mouse up → mouse down → HOLD the mouse down.
2. Then, with the mouse held down, move the mouse into the DIV and mouse up.

The DIV turns red, as if the double-click event originated in the DIV.

It seems that in IE the double-click event is fired both when the double-click：

1. STARTS and ENDS in the DIV
2. STARTS outside the DIV and ENDS inside the DIV.

Yet in FF/Chrome the event is fired only when the double click STARTS and ENDS inside the DIV.

What is the official explanation for this? And how can I make IE double-clicks behave like FF/Chrome double-clicks?

Supper

Not sure why you removed the fiddle I added. I doubt anyone's going to help you without being able to replicate the issue, which is what the fiddle is for. Anyway, I'll put it in a comment where it might help others and where you can't delete it: jsfiddle.net/fH2z3 – Earing

BTW, it also behaves that way in IE10. – Earing

Excuse me.Because my native language is not English and this is the first time that I use the stackoverflow.I just edited the content for many times.I didn't expect that someone replied so quickly.Sorry for the trouble I made.Thanks a lot for your reply! :) – Supper

It seems IE triggers the double click event when the second mouseup occurs over the target regardless of where the first mousedown occurred, whereas with other browsers both the initial mousedown and the second mouseup have to be within the target. I have not been able to find any documentation why and don't know yet how to fix this so that the behavior is consistent. – Earing

Answer 1

(on)dblclick event is a native javascript event, not a jquery's event

Dblclick event is not consistent across browsers, see this ticket 3 years old but still valid in some way: http://bugs.jquery.com/ticket/7876 even now sequence in IE10 is the same as FF/Chrome/Safari but as you noted it, there are still some bugs.

As a workaround, you could use this snippet instead of dblclick event:

DEMO with custom dblclick

$('#test').on('click', function(event){
    var t = this;
    if (!t.clicks) t.clicks = 0;
         ++t.clicks;
         if (t.clicks === 2) {
             t.clicks = 0;
             //here the kind of dclclick is fired ...
             $(t).css({'background-color' : "red"});
         }
         setTimeout(function () {
             t.clicks = 0
         }, 500);//duration value can be change depending of your wishes

});

An other workaround could be to bind/unbind dblclick event on mousedown/mouseenter/mouseleave (hover) handlers, like that:

DEMO with mousedown/mouseenter/mouseleave

$('#test').hover(function () {
    $(this).on('mousedown.cust', function () {
        $(this).on('dblclick.cust', function () {
            $(this).css({
                'background-color': "red"
            });
        });
    });
}, function () {
    $(this).off('mousedown.cust dblclick.cust');
});

Necessity

I'm using the first snippet of code here, but IE throws an error saying Member not found. Any ideas on how to fix this? – Resor

Answer 2

Here's a fiddle. jQuery's dblclick works for me on both FF and IE9. Tested: "the event is fired only when the double click STARTS and ENDS inside the DIV"

$("#test").dblclick(function(event) {
  event.stopPropagation();
  $(this).css({'background-color': 'red'});
});

Trousseau