Javascript MouseOver / MouseOut 儿童事件答案

【问题标题】：Javascript MouseOver / MouseOut children eventsJavascript MouseOver / MouseOut 儿童事件
【发布时间】：2010-02-08 03:55:32
【问题描述】：

我有一个带有一些子元素的元素。当鼠标离开父元素时，我想隐藏父元素及其子元素。我遇到的问题是，当我将鼠标悬停在任何孩子上时，就会触发 mouseout 事件。防止这种情况的最佳方法是什么？我真的只希望当鼠标不在父级或其任何子级中时触发事件。

【问题讨论】：

我认为您的意思是您遇到了mouseover/mouseout 的问题。 mouseenter 和 mouseleave 专门设计为不按您描述的方式运行。
是的，我的错。我的意思是 mouseover / mouseout
这非常类似于这个问题Onmouseover child div problem and event bubbling我answered

【解决方案1】：

事件从子级冒泡到父级（被捕获的地方）

您应该通过添加一个侦听器并让传播停止在那里来捕获孩子的事件。

此代码将阻止事件冒泡到父处理程序

function onMouseLeave(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

问题：鼠标关闭事件是由父级触发的，但它不应该触发。将鼠标悬停在孩子身上不应触发鼠标离开父母。我们怎样才能阻止这种情况？

【讨论】：

【解决方案2】：

您只需要附加到父元素的 mouseout 处理程序。但是……

您需要检查父级实际上是 mouseout 事件的目标，而不是从其中一个子级冒泡的事件。检查 event.target (W3C) 和 event.srcElement (IE)。

您还需要检查鼠标将要进入的元素不是父元素的后代。检查 event.relatedTarget (W3C) 和 event.toElement (IE)。

【讨论】：

【解决方案3】：

来自http://api.jquery.com/mouseover/：

mouseover 在指针移入子元素时触发，而mouseenter 仅在指针移入绑定元素时触发。

mouseout 与 mouseleave 也是如此

【讨论】：