javascript - 为什么在没有发出双击时进入 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 时，如果我反复点击并以小而近距离的 Action 拖动，我会触发 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);
});

fiddle