jquery - jquery - 防止在 jquery 块中执行下一行代码

Question

首先我想为我糟糕的英语道歉。在这个代码块中：

    $("#div1").mouseleave(function(){
           $("#div2").mouseenter(function(){
              //To prevent hiding div2 
           });
           $("#div2").hide();
    });

$("#div2").hide();如您所见，如果光标在 div2 中输入，我想阻止执行。

谢谢。

Answer 1

如果我得到您的问题，如果离开 div1 时鼠标立即进入 div2 或继续在 div2 中，您不想隐藏 div2。

然后你可以这样做：

// returns true if the event is over the jQuery object o
function eventIsOver(event, o) {
    if ((!o) || o==null) return false;
    var pos = o.offset();
    var ex = event.pageX;
    var ey = event.pageY;
    return (
        ex>=pos.left
        && ex<=pos.left+o.width()
        && ey>=pos.top
        && ey<pos.top+o.height()
    );
};

$("#div1").mouseleave(function(e){
           if (eventIsOver(e, $("#div2")) return;
           $("#div2").hide();
});

请注意，根据您的具体情况，您可能需要做不同的事情。例如，如果两个 div 之间可能存在间隙（那么您将不得不处理延迟），或者一个超过另一个，您没有精确说明。

Answer 2

你能试试这个吗？我希望这是你所期望的。否则让我知道你想要什么。

     $("#div1").mouseleave(function(){
       $("#div2").mouseenter(function(){
          //To prevent hiding div2 
       });
       if(!$("#div2").mouseenter()){
        $("#div2").hide();
       }
    });

Answer 3

一种可能的解决方案是将隐藏延迟div几毫秒，例如 100，在此期间如果鼠标进入div2取消隐藏操作

var div2HideTimer;
$("#div1").mouseleave(function(){
    div2HideTimer = setTimeout(function(){
        $("#div2").hide();
    }, 100)
});
$("#div2").mouseenter(function(){
    clearTimeout(div2HideTimer)
});