为什么在没有发出双击的情况下进入dblclick处理程序？

Question

我有一个带有可调整大小的框的JSFiddle 。 双击文档上的任何位置时，框的颜色将在米色和红色之间切换。

问题在于，有时在调整框大小后释放鼠标左键时，会生成dblclick事件，并且框变为红色。 有时您可以释放鼠标按钮而不更改框的颜色，但是如果您仅在框中单击一次，它将生成dblclick并更改框的颜色。

通常，一切正常：我调整大小，没有dblclick条目。 我必须尝试20次才能得到错误的dblclick事件。

我正在使用Chrome。

我可以通过在dblclick处理程序中添加代码（如果正在调整大小）忽略该条目来部分解决此特定问题。 这仍然不能解决dblclick项，不过，出现这种情况（很少），当我重新调整，拿不出dblclick ，但随后得到dblclik当我在框中单击一次。

但是，而不是仅仅得到的jsfiddle在这里工作，我正在寻找这里是这样做的原因dblclick产生。 我是否错误地使用了dblclick事件？ 此事件是否存在已知的错误，也许是更好的解决方案？ 使用鼠标按钮是否会进行某种类型的开关弹跳？

$(function() {
    $("#box").resizable();
    $(document).dblclick(function(e){
        console.log("double-clicked on ",  e.target);
        $("#box").toggleClass("red");
    });
});

Answer 1

它可能与您的硬件有关，我想它也受到系统的“双击延迟”设置的影响。

使用Firefox，如果我反复以微小的闭合动作单击并拖动，则会触发dblclick事件，这将是正常现象。 但是，我看不到dblclicks在5秒间隔的点击中突然冒出来。

为了帮助您跟踪可能的错误原因，请尝试同时记录mousedown和mouseup事件：

$(document).mousedown(function(e){
    console.log("    mousedown on ",  e.target);
});
$(document).mouseup(function(e){
    console.log("    mouseup on ",  e.target);
});

小提琴

Answer 2

试试这个代码：

 $('#test').dblclick(function(e){
 if(!$(e.target).is('.ui-resizable-handle'))
    $(this).toggleClass('selected');
  }).resizable();

小提琴

Answer 3

我也在chrome中进行了测试，对我来说效果很好...如果单击得离dbclick太近，它不会触发，就像事件不会触发，因为当您单击得太快时，它不会识别dbclick。 那是我能给的最好的答案。 有时我的鼠标有些问题，如果我不用力单击，它不会注册鼠标单击...但是我的鼠标已经很旧了，不确定您的鼠标是否工作正常：P

Answer 4

您需要停止点击处理程序以使用Stoppropagation调整大小的句柄。 更新了jsfiddle并进行了测试。

$(function() {
    $("#box").resizable();
    $(".ui-resizable-handle").dblclick(function(ev){
    ev.stopPropagation();
    })
    $(document).dblclick(function(e){
        console.log("double-clicked on ",  e.target);
        $("#box").toggleClass("red");
    });

});