当在li之间导航时，jQuery会为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会触发事件，即使我认为我没有离开列表？

- Jeff Storey

Answer 1

也许你会想要使用 mouseenter / mouseleave 替代 mouseover / mouseout。

- Christophe

Answer 2

我相信这是由JavaScript的"事件冒泡"造成的。 li的事件会向上冒泡至ul。在这里阅读更多信息：http://www.quirksmode.org/js/events_order.html

这可能不是对问题的直接回答，但我认为这是任何JS开发人员都应该知道的。

- BuddhiP

---

起初我以为它可能与那个有关（现在可能仍然如此），但奇怪的是，内部元素（在这种情况下是li）没有触发事件。我只能看到来自外部元素（ul）的事件。 - Jeff Storey

你说 $this 指的是 ul，这很好，因为它是处理事件的 ul。你能否请检查一下 event.target 指向哪里？我相信它应该指向 li 元素。感谢您的时间。 :-) - BuddhiP

目标是链接标签<a>。 - Jeff Storey

很好，所以它正在冒泡（之前没有注意到a），无论如何，mousenter应该适合你，检查jQuery文档，它明确表示mousenter不会冒泡，但要小心，这不是本机浏览器事件，它是IE专有的，但被jQuery复制。如果鼠标移动得太快，可能会导致不良行为。 - BuddhiP

Answer 3

我认为这是因为你将mouseout绑定到了a，而其子元素（<li>）的mouseover会触发mouseout（如果我没记错的话）。正如Aesthete所提到的，用一个div来包裹它，并将mouseover绑定到该div更加简单和直观。

- Edward