jQuery的mouseout（）和mouseleave（）有什么区别？

Question

jQuery的mouseout（）和mouseleave（）有什么区别？

Answer 1

  

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

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

Answer 2

mouseout有时候mouseleave是比mouseenter更好的选择。

例如，假设您创建了一个工具提示，您希望它显示在setTimeout上的元素旁边。您使用mouseleave来防止工具提示立即弹出。您使用clearTimeout清除click上的超时，因此如果鼠标离开工具提示将不会显示。 这将在99％的时间内有效。

但现在让我们假设您附加工具提示的元素是一个带有confirm事件的按钮，让我们假设此按钮会提示用户alert或alert框。用户单击该按钮，alert将触发。用户按下它的速度足够快，你的工具提示没有机会弹出（到目前为止一直很好）。

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

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

Answer 3

jQuery API doc：

mouseout

  

此事件类型可能会因事件冒泡而导致许多令人头疼的问题。例如，当鼠标指针在此示例中移出Inner元素时，将向其发送mouseout事件，然后逐渐向外传递。这可以在不合适的时间触发绑定的mouseout处理程序。有关有用的替代方法，请参阅.mouseleave（）的讨论。

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

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

Answer 4

事件Mouseout将在鼠标离开选定元素以及鼠标离开其子元素时触发。

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

参考：W3School

Answer 5

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

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

来自docs

<块引用>

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

这就是问题所在。

mouseleave 事件没有这个问题。只是使用它让我觉得有用。

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