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

【问题标题】：What is the difference between jQuery's mouseout() and mouseleave()?jQuery 的 mouseout() 和 mouseleave() 有什么区别？
【发布时间】：2011-05-14 14:29:04
【问题描述】：

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

【问题讨论】：

api.jquery.com/mouseout 和 api.jquery.com/mouseleave 很有用
注意：等价于mouseover，等价于mouseleave的是mouseenter。

标签： javascript jquery mouseout mouseleave

【解决方案1】：

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

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

【讨论】：

mouseover 与 mouseenter：jsfiddle.net/hejdav/945pv53h/3（相当于 mouseout 和 mouseleave）
当看到这两种方法都有效并且它们之间的区别对我有用时，上面的解释变得更加清晰。

【解决方案2】：

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

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

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

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

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

【讨论】：

您能解释一下为什么mouseout 在这种情况下会触发吗？对于mouseout，浏览器不会仍然处于锁定状态吗？

【解决方案3】：

jQuery API 文档：

mouseout

由于事件冒泡，这种事件类型可能会引起很多麻烦。例如，在本例中，当鼠标指针移出 Inner 元素时，将向该元素发送一个 mouseout 事件，然后滴流到 Outer。这可能会在不合时宜的时候触发绑定的 mouseout 处理程序。请参阅 .mouseleave() 的讨论以获取有用的替代方法。

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

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

【讨论】：

【解决方案4】：

当鼠标离开被选元素时会触发事件 Mouseout，当鼠标离开它的子元素时也会触发。

仅当指针离开选定元素时才会触发事件 Mouseleave 元素。

参考：W3School

【讨论】：

【解决方案5】：

我在使用 plan Javascript 而不是 jquery 时遇到了类似的问题，但它们之间的关系有些密切，如果现在有人在搜索，我会留下两分钱。

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

来自docs

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

这就是问题所在。

mouseleave 事件没有这个问题。仅仅使用它就可以让我工作。

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

【讨论】：