javascript - Javascript MouseOver / MouseOut 儿童事件

Question

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

score 3 · Accepted Answer

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

您应该通过添加侦听器并使传播停在那里来捕获子级事件。

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

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

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

score 3 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

mouseoutvs也是一样mouseleave

3 回答 3