jquery在li之间导航时为ul触发鼠标答案

【问题标题】：jquery firing mouse out for ul when navigating between lijquery在li之间导航时为ul触发鼠标
【发布时间】：2012-11-21 14:12:33
【问题描述】：

我有一个包含列表的 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 会触发事件？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

起初我认为它可能与此有关（现在仍然可能），但奇怪的是内部元素（在这种情况下为 li）没有触发事件。我只是从外部元素（ul）看到事件
你说 $this 指的是 ul，这很好，因为它是处理事件的 ul。你能检查一下 event.target 指向什么吗？我相信它应该指向 li 元素。谢谢你的时间。 :-)
目标是链接标签<a>
酷，所以它正在冒泡，（之前没有注意到a），反正mousenter应该适合你，查看jQuery doc它明确说mousenter不会冒泡，但要小心，这不是本机浏览器事件，它是 IE 专有的，但由 jQuery 复制。如果鼠标以疯狂的速度移动，可能会导致不良行为。
谢谢，感谢您的帮助。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：