当鼠标从孩子进入父母时触发父母的mouseout答案

【问题标题】：Parent's mouseout is triggered when mouse enters parent from child当鼠标从孩子进入父母时触发父母的mouseout
【发布时间】：2013-12-19 20:34:55
【问题描述】：

当我从今天早些时候 (if interested, find it here) 找到我的问题的解决方案时，我遇到了这个问题。

我有一个简单的 div 结构：

<div id="outer">
    <div id="inner">
        <div id="content"></div>
        <div id="handle">HOVER HERE</div>
    </div>
</div>

outer 注册了一个 mouseout 事件：

$('#outer').on('mouseout', function(event) {
    if (!(event.relatedTarget.id == "outer") &&
        !$(event.relatedTarget).isChildOf("outer")) {
        mouseIsOverMenu = false;
        menu_rollin();
    }
});

（您可以看到整个工作示例here。）

这是具有向下滑动/向上滑动效果的菜单的简单版本。

现在这是我的问题：

我完全理解 mouseout 在输入子元素时触发（这就是 isChildOf 检查的原因）。我不明白的是，当我将鼠标从content 移动到outer 时会触发该事件（inner 只是将实际内容居中，而content 是滑动部分并且与@ 具有相同的宽度987654331@.) 这就是为什么我添加了检查 relatedTarget 是否是元素本身的原因。

据我了解，孩子（ren）上不应该有任何 mouseout 事件。然而，在旧的“警报调试”期间，如果鼠标从content 回到outer，事件似乎会触发，当然，isChildOf 本身的isChildOf 检查失败（其中是相关目标）。

我再次阅读了关于冒泡和捕获的内容，但我是这样理解的，即只有在存在多个特定事件的事件处理程序时才有意义。

如果有任何解释或资源有助于理解其原因，我将不胜感激。

【问题讨论】：

标签： jquery dom mouseevent jquery-events

【解决方案1】：

由于事件冒泡，您遇到了这个问题。请参阅your fiddle 用彩色边框稍作更改。

当您将鼠标移出 content 时，会触发 mouseout 事件（用于离开 content）。 content 没有处理它，所以它冒泡给他的父母 inner 等等。 mouseout 事件仅由外部处理程序触发。

另见jquery .mouseout()：由于事件冒泡，这种事件类型可能会引起很多麻烦。例如，在本例中，当鼠标指针移出 Inner 元素时，将向该元素发送一个 mouseout 事件，然后滴流到 Outer。这可能会在不合时宜的时候触发绑定的 mouseout 处理程序。请参阅 .mouseleave() 的讨论以获取有用的替代方法。

【讨论】：

非常感谢您的回答！如果我做对了，那么事件（我假设这对所有人都是一样的）总是被触发，但是如果没有处理程序存在，那么它们就不会被捕获吗？（就元素本身而言，它可能通过冒泡捕获。）
类似的东西。我不知道事件处理是如何在 jquery 中完成的。如果您有可能尝试从 Nicholas Zakas Professional JavaScript for Web Developers 那里获得一本书，他解释了事件和不同的事件流（事件捕获和事件冒泡）。很可能还有一些关于它的好文章。
再次感谢。我认为您的回答已经澄清了“问题”的来源。我会努力去买这本书，听起来很有趣。

【解决方案2】：

这听起来像是event bubbling 的问题。像event.stopPropagation() 这样的东西可能会有所帮助。

【讨论】：