Question

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

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

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

感谢。

Answer 1

如果我收到您的问题，您不想隐藏div2如果离开div1时鼠标立即进入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的隐藏时间延迟几百毫秒，如果鼠标进入div2则取消隐藏操作

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

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

3 个答案: