javascript - 获得不必要的dblclick

我在这里有一个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");
    });

});

最佳答案

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