jquery - 使用 IE 双击

Question

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

以下是我的 HTML：

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

还有我的 jQuery：

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

在 IE 中，执行以下操作：

1. 在 DIV 之外，鼠标向下 → 鼠标向上 → 鼠标向下 → 按住鼠标。
2. 然后，按住鼠标，将鼠标移入 DIV 并向上移动。

DIV 变为红色，好像双击事件起源于 DIV。

似乎在IE中双击事件在双击时都会触发：</p>

1. DIV 中的开始和结束
2. 在 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 事件：

带有自定义 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 事件，如下所示：

使用 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

这是一个小提琴。jQuerydblclick在 FF 和 IE9 上都适用于我。已测试：“只有在 DIV 内双击 STARTS 和 ENDS 时才会触发该事件”

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