jquery – 使用IE双击

我在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和ENDS之外的起点.

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

对此有何正式解释？我怎样才能让IE双击表现得像FF / Chrome双击？

解决方法

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

原文地址：https://www.jb51.cc/jquery/179126.html