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

获取不需要的dblclick

1 个答案: