Question

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

Answer 1

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

你应该通过添加一个监听器并使传播停在那里来捕捉孩子们的事件。

此代码将阻止事件冒泡到父句柄

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

问题：当父进程不应该触发鼠标关闭事件时。鼠标悬停在子节点上不应该从父节点触发鼠标。我们怎么能阻止这个？

Answer 2

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

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

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

Answer 3

当指针移动到子元素时，
mouseover会触发，而mouseenter仅在指针移动到绑定元素时触发。

同样适用于mouseout vs mouseleave