1

我正在尝试创建一个下拉菜单作为主菜单的子菜单。子菜单只是一个包含项目/链接的 div 元素。单击主菜单项时，子菜单会下拉并停留在那里。这很容易，但是如果光标离开子菜单，我希望子菜单向上滑动。换句话说，一个简单的“mouseout”事件。然而，似乎当光标进入子菜单内的一项时，会触发“mouseout”事件。如果您考虑一下，这就是您想要的，因为光标确实离开了子菜单元素，即使它没有离开它的边界。但是，这确实会带来问题，因为我只希望在光标移到子菜单元素边界之外时触发事件。

真正归结为，在另一个 div 中包含一个 div，如下所示：

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

现在，有两件事可能会导致 DIV-1 触发“mouseout”事件：

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

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

有没有人有一个很好的解决这个问题的方法？这似乎是一个足够普遍的功能，所以一定有人解决了它。

4

2 回答 2

2

http://users.tpg.com.au/j_birch/plugins/superfish/ <--节省时间，他已经为你拔掉了头发（也许不是字面意思，虽然，不知道）

于 2009-12-20T21:31:57.500 回答
0

由于来自子元素的鼠标悬停事件冒泡/传播到父母，如果我要走非图书馆路线，我会使用在子菜单的 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 也应该可以正常工作。

于 2009-12-20T21:27:09.290 回答