jQuery 的 mouseout() 和 mouseleave() 有什么区别？
问问题
57018 次
5 回答
105
mouseleave 事件与 mouseout 处理事件冒泡的方式不同。如果在此示例中使用 mouseout，则当鼠标指针移出 Inner 元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave 事件仅在鼠标离开它所绑定的元素而不是后代元素时触发其处理程序。所以在这个例子中，当鼠标离开 Outer 元素而不是 Inner 元素时触发处理程序。
于 2010-11-23T16:57:20.133 回答
18
有时可能是mouseout比 更好的选择mouseleave。
例如，假设您创建了一个工具提示，希望显示在mouseenter. 您用于setTimeout防止工具提示立即弹出。您清除使用超时，mouseleave因此clearTimeout如果鼠标离开，则不会显示工具提示。这将在 99% 的时间内有效。
但是现在假设您附加了工具提示的元素是一个带有click事件的按钮，并且我们还假设该按钮使用 aconfirm或alert框提示用户。用户单击按钮并alert触发。用户按下它的速度足够快，以至于您的工具提示没有机会弹出（到目前为止一切都很好）。
用户按下alert框 OK 按钮，鼠标离开元素。但是由于浏览器页面现在处于锁定状态，因此在按下 OK 按钮之前不会触发任何 javascript，这意味着您的mouseleave事件将不会触发。用户按下 OK 后，工具提示将弹出（这不是您想要的）。
在这种情况下使用mouseout将是合适的解决方案，因为它会触发。
于 2011-07-12T15:54:40.350 回答
10
jQuery API 文档：
mouseout
由于事件冒泡，这种事件类型会引起很多麻烦。例如，在本例中，当鼠标指针移出 Inner 元素时，将向该元素发送一个 mouseout 事件，然后向上传播到 Outer。这可能会在不合时宜的时候触发绑定的 mouseout 处理程序。请参阅 .mouseleave() 的讨论以获取有用的替代方法。
mouseleave由于上述原因而设计的自定义事件也是如此。
于 2010-11-23T16:59:15.443 回答
4
于 2018-11-21T09:22:15.423 回答
0
我在使用计划 Javascript 而不是 jquery 时遇到了类似的问题，但是它们之间存在一些相关性，如果现在有人在搜索，我会留下两分钱。
我试图mouseout在导航菜单上使用该事件。父级有一个由s 元素div列表组成的子菜单。ul当我尝试导航到div子元素时，该mouseout事件被触发。这不是我想要的输出。
从文档
如果光标进入子元素，mouseout 也会传递给元素，因为子元素会遮挡元素的可见区域。
这就是问题所在。
mouseleave活动没有这个问题。仅仅使用它就可以让事情对我有用。
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event
于 2021-04-17T20:02:18.360 回答