双击使用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中，双击事件似乎都是在双击时触发的：

1. 在DIV中开始和结束
2. 在DIV之外开始，在DIV中结束。

然而，在FF/Chrome中，只有当双击启动并在DIV内结束时，事件才会触发。

官方对此的解释是什么？我如何使IE双击行为像FF/Chrome双击？

Answer 1

(on)dblclick事件是一个原生javascript事件，而不是jquery的事件

Dblclick事件在浏览器上不一致，请看这张3年前的票证，但在某些方面仍然有效:即使现在http://bugs.jquery.com/ticket/7876在IE10中的序列与FF/Chrome/Safari相同，但正如您注意到的，仍然存在一些but。

作为解决办法，您可以使用此片段而不是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事件，如下所示：

带鼠标下来/鼠标/鼠标保存的演示

$('#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

这是一个小提琴。jQuery的dblclick在FF和IE9上都适用于我。测试：“只有当双击启动并在DIV内结束时，事件才会被触发”

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