Javascript 获取不需要的dblclick

我这里有一个JSFIDLE--有一个可调整大小的盒子。如果双击文档中的任意位置，框颜色将在米色和红色之间切换

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

不过，通常情况下，一切都很顺利。我必须尝试20次才能得到一个错误的dblclick事件

我用的是Chrome

有人看到问题了吗？如何解决

谢谢

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

});

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

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

---

你想把

dblclick

也放在框中，对吗？是的，我可以检测到我是否正在调整大小，在这种情况下忽略dblclick事件，但这不能解决调整大小完成时没有dblclick，但在框中单击一次调整大小后生成dblclick事件的情况。更重要的是，我在这里真正想要的是对问题的解释（“有人看到问题了吗？”），不过我还是会检查您的答案，因为它比.resize（）检测调整大小的效率更高，后者每隔几秒钟就会中断一次。主持人认为，询问我看到dblclick的原因是一个新问题，应该单独提问。