Question

我正在尝试创建一个下拉菜单，作为主菜单的子菜单。子菜单只是一个包含项目/链接的div元素。单击主菜单项时，子菜单会下降并保持不变。这很简单，但如果光标离开子菜单，我希望子菜单向上滑动。换句话说，一个简单的'mouseout'事件。但是，当光标进入子菜单中的一个项目时，似乎会触发“mouseout”事件。这就是你想要的，除非你考虑它，因为光标确实离开了子菜单元素，即使它没有离开它的边界。但是，这确实存在问题，因为如果光标移动到子菜单元素的边界之外，我只希望触发事件。

真正归结为，在另一个div中有一个div，就像这样：

----------------------------
|          DIV-1           |
|                          |
|      -------------       |
|      |           |       |
|      |   DIV-2   |       |   AREA OUTSIDE DIV-1
|      |           |       |
|      |           |       |
|      |           |       |
|      -------------       |
|                          |
|                          |
----------------------------

现在，有两件事可能导致DIV-1发起'mouseout'事件：

光标从DIV-1的边界内移动到边界之外的区域
光标从DIV-1的边界内移动到DIV-2的区域

我的目标是能够将这两种情况相互区分开来，但我还是无法弄清楚如何。

有没有人有这个问题的好方法？这似乎是一个很常见的功能，所以有人必须解决它。

Answer 1

http://users.tpg.com.au/j_birch/plugins/superfish/＆lt; - 节省时间，他已经为你拔出头发（可能不是字面意思，但是，不知道）

Answer 2

由于来自子元素的鼠标悬停事件冒泡/传播到父母，我会使用在子菜单的div的onmouseover事件中取消的计时器，如果我去了非图书馆路线：

var hideMenuTimer;
subMenuDiv.onmouseover = function () {
    window.clearTimeout(hideMenuTimer);
}
subMenuDiv.onmouseout = function (evt) {
    evt = evt || window.event;
    if ((evt.target || evt.srcElement).id == "subMenuDiv")
        hideMenuTimer = window.setTimeout(function () {
            subMenuDiv.style.display = "none";
        }, 300);
}

一个非常简单的例子，但它应该可以工作，只要子菜单div的所有子元素正确地将onmouseover事件冒泡到subMenuDiv元素，然后在轮询之前取消定时器。此外，我已经设置了300毫秒的超时时间，因为我认为最好有这样的事情，这样如果你不小心鼠标移动，你有一个短的窗口让鼠标在隐藏之前重新进入。如果你想立即隐藏它，将其设置为0ms也应该可以正常工作。

JavaScript动画下拉菜单

2 个答案: