Question

我正在尝试创建一个“悬停菜单” - 您将鼠标悬停在标题上，然后在其下方出现一个菜单框 - 我希望当您将鼠标移到其外时它会消失。

将鼠标悬停在“STUFF”上 - 下方会出现一个菜单框。现在开始慢慢地移动鼠标光标 - 向下 - 一旦你通过第一个项目 - 它就会消失！这是不所需的操作。
很明显，我的onmouseout定义位于#menuStuff div 上 - 您可以清楚地看到Firebug的尺寸 - 它需要整个列表的宽度和高度 -
所以....为什么它从第一个列表项目向下移动后会激活？光标仍然在div的范围内 - 这里发生了什么？

Answer 1

如果您使用的是jQuery，可以在div上使用mouseleave事件：

http://jsfiddle.net/Kjdc5/

$('#menuStuff').mouseleave(function(){
    $('#menuStuff').hide();
});

Answer 2

将鼠标悬停在某个图层上会导致子元素上的事件冒泡：

在基于图层的导航中，您可能需要知道鼠标何时离开图层以便可以关闭它。因此，您将一个onmouseout事件处理程序注册到该层。但是，事件冒泡会导致此事件处理程序在鼠标离开图层内的任何元素时触发。

--------------
| Layer      |.onmouseout = doSomething;
| --------   |
| | Link | ----> We want to know about this mouseout
| |      |   |
| --------   |
| --------   |
| | Link |   |
| |    ----> | but not about this one
| --------   |
--------------
---->: mouse movement

另一个显示停止点是，当您将鼠标移动到图层中，然后移动到链接上时，浏览器会在图层上注册mouseout事件！它对我来说没有多大意义（鼠标仍在图层中），但所有浏览器都同意这一点。

那么当鼠标实际离开图层时，我们如何拒绝任何不发生的鼠标输出？

function doSomething(e) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
    reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
}

首先获取事件目标，即。鼠标移出的元素。如果目标不是DIV（图层），请立即结束该功能，因为鼠标肯定没有离开图层。

如果目标是图层，我们仍然不确定鼠标是否离开图层或是否在图层中输入了链接。因此，我们将检查事件的relatedTarget / toElement，即。鼠标移动到的元素。

我们读出这个元素，然后我们将向上移动DOM树，直到我们遇到事件的目标（即DIV）或body元素。

如果我们遇到目标，鼠标会朝向图层的子元素移动，因此鼠标实际上并未离开图层。我们停止了这个功能。

当函数在所有这些检查中幸存时，我们确定鼠标实际上已经离开了图层，我们可以采取适当的操作（通常使图层不可见）。

Mouseenter和mouseleave ：

微软有另一个解决方案。它创造了两个新的事件mouseenter和mouseleave。它们与mouseover和mouseout几乎相同，只是它们不会对事件冒泡做出反应。因此，他们将整个HTML元素注册为一个实体块，并且不会对块内发生的鼠标移动和出现做出反应。

因此，使用这些事件也解决了我们的问题：他们只对他们注册的元素上的鼠标/出局作出反应。

目前，Windows和更高版本上的Explorer 5.5仅支持这些事件。也许其他浏览器厂商会复制这些事件。

所以最好使用mouseleave而不是mouseout，因为它会导致事件冒泡。

Answer 3

而不是 onmouseout 使用 onmouseleave ：

<div id="menuStuff" class="hover-menu" onmouseleave="$('#menuStuff').hide();" >

jsfiddle - ＆gt; http://jsfiddle.net/kzJ8y/1/

“悬停菜单”中“onmouseout”的意外行为

3 个答案: