Question

因此，当我的鼠标离开特定div时，我正尝试触发事件：#div，如果鼠标当前没有悬停#div2，也只会触发事件。

我正在尝试拼凑一个解决方案，这就是我目前所拥有的：

$("body").on('mouseleave', '#div', function(e){
    if( e.target.id != 'div2' && !$('div2').find(e.target).length) {
        //Action Here
    }
});

任何帮助将不胜感激！

Answer 1

这对你有用。当您通过e.clientX和e.clientY离开div时，您可以访问鼠标位置。您可以将此鼠标位置与第二个div的边界框进行比较，以查看您是否输入了该div。

$("#div1").mouseleave(function (e) {

...

if (e.clientX >= left && e.clientY >= top && e.clientX <= right && e.clientY <= bottom) {
    //you're in div 2! add an else to do something if you're NOT entering div2 
    //or negate this condition
}

});

这是一个小提琴来说明这是如何工作的

http://jsfiddle.net/2jRC8/

Answer 2

试试这个，

var hovering = false;

$("#div").mouseleave(function () {
    if(!hovering) {
        //Action Here
    }
});

$("#div2").mouseenter(function () {
    hovering = true;
});
$("#div2").mouseleave(function () {
    hovering = false;
});

如果您将鼠标悬停在#div2上，这将设置一个等于true的布尔值。现在，您在#div鼠标离开功能中的操作只应在您#div2之外时运行。

Answer 3

我跟着尼古拉斯的回答并尝试了但是根据乔尔的评论它不会起作用。所以在相同的代码中尝试了一些更改，现在它为我工作。

var hovering = false;

$("#div").mouseleave(function () {
    setTimeout(() => {
        if(!hovering) {
            //Action Here
        }
    }, 0);
});

$("#div2").mouseenter(function () {
    hovering = true;
});
$("#div2").mouseleave(function () {
    hovering = false;
});

Answer 4

您可以将操作放在HTML标记的mouseOver中，只需设置变量或bool即可检测您是否来自原始div。

带有stopPropagation的其他div的mouseOver处理程序可以防止任何干扰。

这将是如何构建许多关闭灯箱或工具提示功能的。

JQuery如果鼠标离开div并且还没有悬停另一个div做X

4 个答案: