javascript - 获取不需要的 dblclick

Question

我这里有一个 jsfiddle - http://jsfiddle.net/stevea/eF5cp/5/ - 带有可调整大小的盒子。如果双击文档中的任意位置，框颜色将在米色和红色之间切换。

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

不过，通常情况下，一切正常。我必须尝试大约 20 次才能获得错误的 dblclick 事件。

我正在使用 Chrome。

有没有人看到这个问题以及如何解决它？

谢谢

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

});

Answer 1

jsFiddle Demo

我建议使用一个标志来防止这种行为。在调整大小开始时设置标志，然后稍微延迟在调整大小结束时释放标志。我在我的演示中留下了一个警报，这样你就可以看到它是否被击中而不是改变颜色。

$(function() {
 var ignoreClick = false;
 $("#box").resizable({
    start:function(){ ignoreClick = true; },
    stop:function(){ 
        setTimeout(function(){
            ignoreClick = false; 
        },100);
    }
 });
 $(document).dblclick(function(e){
    if(ignoreClick){
        alert("prevented");
        return false;
    }
    console.log("double-clicked on ",  e.target);
    $("#box").toggleClass("red");
 });
});