JavaScript鼠标悬停/移出子元素事件

Question

我有一个带有子元素的元素。当鼠标离开父元素时，我想隐藏父元素和它的子元素。问题是当我悬停在任何子元素上时，mouseout事件被触发。最好的方法是什么？我只想在鼠标不在父元素或其任何子元素内时触发事件。

- Matt

---

我认为你的问题是关于mouseover/mouseout。mouseenter和mouseleave被专门设计成不按照你所描述的方式运行。 - Crescent Fresh

抱歉，我的错。我是指鼠标悬停/移出。 - Matt

这与此问题非常相似Onmouseover child div problem and event bubbling，我已经回答了。 - meouw

Answer 1

事件从子元素冒泡到父元素（在那里被捕获）

您应该在子元素上添加监听器并停止传播来捕获事件。

这段代码将阻止事件冒泡到父级处理程序。

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

问题：当鼠标移到子元素上时，父级触发了鼠标离开事件，这是不应该的。我们如何阻止这种情况发生？

- linead

Answer 2

你只需要将mouseout事件处理程序附加到父元素上。但是...

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

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

- Sean Hogan

Answer 3

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

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

mouseout和mouseleave同理。

- Anton