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

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

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

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

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

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

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

jQuery API 文档：

mouseout

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

所以mouseleave是一个自定义事件，其目的是因为上述原因。

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

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

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

参考：W3School

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

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

从文档

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

这就是问题所在。

该mouseleave事件没有这个问题。只是使用它使事情对我有用。

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