Question

我在IE中发现了双击问题。

以下是我的HTML：

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

我的jQuery：

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

在IE中，执行以下操作：

在DIV外面，鼠标按下→鼠标向上→鼠标按下→按住鼠标。
然后，按住鼠标，将鼠标移动到DIV并向上鼠标移动。

DIV变为红色，就好像双击事件来自DIV。

似乎在IE中，双击时双击事件：

DIV中的STARTS和ENDS
在DIV内部开始，在DIV内部结束。

然而在FF / Chrome中，只有在DIV内双击STARTS和ENDS时才会触发该事件。

官方解释是什么？我怎样才能使IE双击表现得像FF / Chrome双击？

Answer 1

（on）dblclick事件是本机javascript事件，而不是jquery的事件

Dblclick事件在浏览器中不一致，看到这张票3年但仍然有效：http://bugs.jquery.com/ticket/7876即使现在IE10中的序列与FF / Chrome / Safari相同，但正如您所说，那里仍然是一些错误。

作为一种解决方法，您可以使用此代码段而不是dblclick事件：

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

});

另一种解决方法可能是在mousedown / mouseenter / mouseleave（悬停）处理程序上绑定/取消绑定dblclick事件，如下所示：

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

Answer 2

这是一个fiddle。 jQuery的dblclick适用于FF和IE9。经过测试：“只有在DIV内双击STARTS和ENDS时才会触发事件”

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

双击使用IE浏览器

2 个答案: