javascript - 当两个元素都没有悬停时调用函数？

Question

我的想法是有两个变量， insideLink 标记我当前是否将鼠标悬停在菜单上， insideBox 则检查我是否将鼠标悬停在 Div 容器上。

如果我离开，我会检查是否也超出了另一个元素，如果我超出了这两个元素，我会调用 closeboth 函数来关闭它们。

我尝试过这样做，但没有成功。当我离开菜单链接后，框立即关闭。

我认为 setTimeout 会有帮助，但是我的尝试效果不太好。有任何想法吗？

$(linkID).hover(function() {
    insideLink=1;
    console.log("Its over Link");
},function() {
    insideLink=0;
    if (insideBox==0) {
      console.log("Its outside both elements, closebox"); 
      closebox();
    }
});

$(open).hover(function() {
    insideBox=1;
    console.log("Its inside box");
},function() {
    insideBox=0;
    if (insideLink==0) {
      console.log("Its outside both elements, closebox");
      closebox();
    }
});

Answer 1

由于链接的mouseout在框的mouseover之前被触发，一种方法是使用setTimeout():

insideLink=0;
setTimeout(function() {
    if (insideBox==0) {
        console.log("Its outside both elements, closebox"); 
        closebox();
    }
}, 100);

它将框关闭操作暂停 100 毫秒，这应该足以触发将 insideBox 设置为 1 的 mouseover 事件。框的 .hover()。