Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

jquery - double click using IE

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

(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');
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...