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);
});

fiddle

Answer 2

试试这段代码：

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

fiddle

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");
    });

});

为什么在没有发出双击时进入dblclick处理程序？

4 个答案: