当鼠标从孩子进入父母时触发父级鼠标

当我从今天早些时候（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事件：（你可以看到整个工作示例here）

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

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

现在，这里是我的问题：

我完全明白，在进入一个子元素的鼠标移开火（这是为isChildOf检查的原因）。我不明白的是，当我将鼠标从content移动到outer（inner仅仅是实际内容的中心，而content是滑动部分并且具有与inner相同的宽度）时，该事件被激发。）这就是为什么我添加了检查relatedTarget是否是元素本身。

对于我的理解，不应该有任何鼠标事件对儿童（ren）。然而，在老式的'警报调试'期间，事实证明，如果鼠标从content回到outer，并且检查本身（它是relatedTarget）失败，那么事件似乎会触发。

我读过关于冒泡和再次捕捉的内容，但我这样理解，只有当一个特定事件的多个事件处理程序存在时它才是相关的。

我会感谢任何解释或资源，这有助于理解这个原因。

来源

2013-12-19 Dennis

由于事件冒泡，你得到了这个问题。请参见your fiddle用彩色边框稍作修改。

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

另请参见jquery .mouseout()：此事件类型由于事件冒泡可能导致许多头痛。例如，在这个例子中，当鼠标指针移出Inner元素时，一个mouseout事件将被发送到该元素，然后涓涓细流到Outer。这可以在不合时宜的时间触发绑定的鼠标移出处理程序。请参阅.mouseleave（）的讨论以获得有用的替代方法。

来源

2013-12-19 21:50:04

非常感谢您的回答！如果我说得对，那么事件（我认为这是相同的）总是被触发，但是如果没有处理程序存在，那么它们只是不被捕获？（通过元素本身，它可能通过冒泡被捕获。） – Dennis

类似的东西。我不知道事件处理是如何完全在jQuery中完成的。如果您有可能尝试从Nicholas Zakas获得一本书_Professional JavaScript for Web Developers_，其中他解释了事件和不同事件流（事件捕获和事件冒泡）。很可能也有一些关于它的好文章。 –

再次感谢。我认为你的答案已经澄清了“问题”来自何处。我会尽力拿到这本书，听起来很有趣。 – Dennis

这听起来像是一个问题event bubbling。类似event.stopPropagation()可能会有所帮助。

来源

2013-12-19 20:51:31 devnill

当鼠标从孩子进入父母时触发父级鼠标

回答

相关问题