Question

当我从今天早些时候（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。）

这是具有slideDown / slideUp效果的菜单的简单版本。

现在这是我的问题：

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

根据我的理解，孩子（ren）上不应该有任何mouseout事件。但是，在良好的旧“警报调试”过程中，如果鼠标从content返回outer，事件似乎会触发，当然，isChildOf检查失败了outer本身（即relatedTarget）。

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

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

Answer 1

由于事件冒泡，你遇到了这个问题。请参阅your fiddle稍微改变了彩色边框。

当你将鼠标移出content时，会触发mouseout事件（离开content）。 content没有处理它，因此它的父母是inner，等等。 mouseout事件只能由外部处理程序进行。

另请参阅jquery .mouseout()：此事件类型可能会因事件冒泡而导致许多令人头疼的问题。例如，当鼠标指针在此示例中移出Inner元素时，将向其发送mouseout事件，然后逐渐向外传递。这可以在不合适的时间触发绑定的mouseout处理程序。有关有用的替代方法，请参阅.mouseleave（）的讨论。

Answer 2

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

当鼠标从孩子进入父母时，会触发父母的鼠标输出

2 个答案: