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

Question

  

可能重复：
  Javascript: Multiple mouseout events triggered

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

我的问题类似于this question，但我没有使用jQuery。

Answer 1

菲利克斯的第一个链接得到了正确答案。引用article ...

  

另一个显示限制器是当你将鼠标移动到图层时   然后在链接上，浏览器在图层上注册一个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），或身体元素。

     

如果我们遇到目标，则鼠标移向子元素   图层，因此鼠标实际上没有离开图层。我们停止了   功能

     

当该功能在所有这些检查中幸存时，我们确定了   鼠标实际上已离开图层，我们可以采取适当的行动   （通常使图层不可见）。