javascript - Mouseout 在嵌套元素上触发，我只希望它在离开容器时触发

Question

可能重复：
Javascript：触发了多个 mouseout 事件

我一直有一个问题，我希望查看鼠标何时退出容器，并且当我将鼠标悬停在容器中包含的元素上时会触发该事件。我知道 jQuery 已经用.hover函数解决了这个问题，但我不想使用整个库来解决单个问题。我如何在 JavaScript 中做到这一点？

我的问题与这个问题类似，但我没有使用 jQuery。

Answer 1

Felix 在他的第一个链接中得到了正确的答案。引用文章...

另一个显示停止器是，当您将鼠标移动到图层中，然后移动到链接上时，浏览器会在图层上注册一个 mouseout 事件！这对我来说没有多大意义（鼠标仍在图层中），但所有浏览器都同意这一点。

那么我们如何拒绝当鼠标实际离开层时没有发生的任何鼠标移出呢？

function doSomething(e) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
    reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
}

首先获取事件目标，即。鼠标移出的元素。如果目标不是 DIV（层），则立即结束函数，因为鼠标肯定没有离开层。

如果目标是图层，我们仍然不确定鼠标是离开图层还是进入图层内的链接。因此我们要检查事件的relatedTarget/toElement，即。鼠标移动到的元素。

我们读出这个元素，然后我们将在 DOM 树中向上移动，直到遇到事件的目标（即 DIV）或 body 元素。

如果我们遇到目标鼠标移向层的子元素，那么鼠标实际上并没有离开层。我们停止该功能。

当函数通过所有这些检查时，我们可以确定鼠标实际上已经离开了图层，我们可以采取适当的行动（通常使图层不可见）。