javascript - jquery在li之间导航时为ul触发鼠标

Question

我有一个包含列表的 html 页面

<ul id="mylist">
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
</ul>

然后一些 jquery 代码在鼠标离开列表时触发事件

$('#mylist').mouseout(function(evt) {
    $(this).fadeOut('fast');
});

问题是，当我在 item1 和 item2 之间移动鼠标（从 item1 垂直开始并向下移动到 item2）时，鼠标会触发（并且 $this 正在引用 ul）。即使我认为我没有离开列表，为什么 ul 会触发一个事件？

score 10 · Accepted Answer

10

也许您会想使用mouseenter / mouseleave而不是 mouseover / mouseout。

于 2012-12-04T01:34:25.080 回答

score 1 · Accepted Answer

我相信这是由于 JavaScript 的“事件冒泡”。li 的事件冒泡到 ul。在此处阅读有关此内容的更多信息：http ://www.quirksmode.org/js/events_order.html

这可能不是问题的直接答案，但我相信任何 JS 开发人员都应该知道。

score 0 · Accepted Answer

我认为这是因为您将 mouseout 绑定到 a ，将鼠标悬停在其子级上（

) 将触发鼠标操作（如果我是正确的）。正如 Esthete 所提到的，用 div 包装它并将鼠标悬停绑定到该 div 更简单直接。

3 回答 3