jQuery 的 mouseout() 和 mouseleave() 有什么区别？

Question

jQuery 的 mouseout() 和 mouseleave() 有什么区别？

Answer 1

mouseleave 事件与 mouseout 事件的不同之处在于它处理事件冒泡的方式。如果本例中使用了 mouseout，那么当鼠标指针移出 Inner 元素时，就会触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave 事件仅在鼠标离开其绑定的元素（而不是后代元素）时触发其处理程序。因此，在此示例中，当鼠标离开 Outer 元素而不是 Inner 元素时，将触发处理程序。

来源：http://api.jquery.com/mouseleave/

Answer 2

有时，mouseout 可能是比 mouseleave 更好的选择。

例如，假设您创建了一个工具提示，希望将其显示在 mouseenter 上的某个元素旁边。您可以使用 setTimeout 来防止工具提示立即弹出。您可以使用 clearTimeout 清除 mouseleave 上的超时，这样如果鼠标离开，工具提示将不会显示。 这在 99% 的情况下都有效。

但是现在假设您附加了工具提示的元素是一个带有 click 事件的按钮，并且我们还假设此按钮会提示用户使用确认或警报框。用户单击按钮并触发警报。用户按下它的速度足够快，以至于您的工具提示没有机会弹出（到目前为止一切顺利）。

用户按下alert框的OK按钮，然后鼠标离开该元素。但由于浏览器页面现在处于锁定状态，因此在按下“确定”按钮之前不会触发任何 JavaScript，这意味着您的 mouseleave 事件不会触发。用户按下“确定”后，将弹出工具提示（这不是您想要的）。

在这种情况下使用 mouseout 是合适的解决方案，因为它会触发。

Answer 3

jQuery API 文档：

mouseout

由于事件冒泡，这种事件类型可能会导致许多令人头痛的问题。例如，在本例中，当鼠标指针移出 Inner 元素时，将向该元素发送 mouseout 事件，然后向上滴到 Outer 元素。这可能会在不适当的时候触发绑定的 mouseout 处理程序。请参阅 .mouseleave() 的讨论以获取有用的替代方案。

所以mouseleave是一个自定义事件，就是因为上述原因而设计的。

http://api.jquery.com/mouseleave/

Answer 4

当鼠标离开所选元素以及鼠标离开其子元素时，Mouseout 事件将触发。

当指针仅离开所选元素时，Mouseleave 元素将触发事件。

参考：W3School

Answer 5

我使用 plan Javascript 而不是 jquery 遇到了类似的问题，但它们有一些相关性，我会留下我的两分钱，以防现在有人在搜索。

我试图在导航菜单上使用 mouseout 事件。父 div 有一个由 ul 元素列表组成的子菜单。当我尝试导航到 div 子元素时，mouseout 事件被触发。这不是我想要的输出。

来自文档

如果光标进入子元素，mouseout 也会传递到元素
元素，因为子元素遮挡了元素的可见区域
元素。

这就是问题所在。

mouseleave 事件没有这个问题。只要使用它就可以让事情对我有用。

https://developer.mozilla.org/en-US/文档/Web/API/Element/mouseleave_event