Javascript jQuery 的 mouseout() 和 mouseleave() 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4258615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between jQuery's mouseout() and mouseleave()?
提问by Dave
What is the difference between jQuery's mouseout() and mouseleave()?
jQuery 的 mouseout() 和 mouseleave() 有什么区别？
回答by meder omuraliev
The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.
mouseleave 事件与 mouseout 处理事件冒泡的方式不同。如果在本例中使用 mouseout，那么当鼠标指针移出 Inner 元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面， mouseleave 事件仅在鼠标离开它所绑定的元素时触发其处理程序，而不是后代元素。所以在这个例子中，当鼠标离开 Outer 元素而不是 Inner 元素时会触发处理程序。
回答by Darcy
There can be times when mouseoutis a better choice than mouseleave.
有时可能是mouseout比 更好的选择mouseleave。
For example, let's say you've created a tooltip that you want displayed next to an element on mouseenter. You use setTimeoutto prevent the tooltip from popping up instantly. You clear the timeout on mouseleaveusing clearTimeoutso if the mouse leaves the tooltip won't be displayed. This will work 99% of the time.
例如，假设您创建了一个工具提示，希望在 上的元素旁边显示mouseenter。您setTimeout用来防止工具提示立即弹出。您清除超时mouseleave使用clearTimeout，所以如果鼠标离开提示将不显示。这将在 99% 的情况下起作用。
But now let's say the element you have a tooltip attached to is a button with a clickevent, and let's also assume this button prompts the user with either a confirmor alertbox. The user clicks the button and the alertfires. The user pressed it fast enough that your tooltip didn't have a chance to pop up (so far so good).
但是现在让我们假设您附加了工具提示的元素是一个带有click事件的按钮，并且我们还假设这个按钮提示用户使用 aconfirm或alertbox。用户单击按钮并alert触发。用户按下它的速度足够快，以至于您的工具提示没有机会弹出（到目前为止很好）。
The user presses the alertbox OK button, and the mouse leaves the element. But since the browser page is now in a locked state, no javascript will fire until the OK button has been pressed, meaning your mouseleaveevent WILL NOT FIRE. After the user presses OK the tooltip will popup (which is not what you wanted).
用户按下alert框 OK 按钮，鼠标离开元素。但是由于浏览器页面现在处于锁定状态，因此在按下 OK 按钮之前不会触发任何 javascript，这意味着您的mouseleave事件不会触发。用户按 OK 后，工具提示将弹出（这不是您想要的）。
Using mouseoutin this case would be the appropriate solution because it will fire.
mouseout在这种情况下使用将是合适的解决方案，因为它会触发。
回答by jAndy
jQuery API doc:
jQuery API 文档：
mouseout
mouseout
This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer. This can trigger the bound mouseout handler at inopportune times. See the discussion for .mouseleave() for a useful alternative.
由于事件冒泡，这种事件类型可能会导致许多头痛。例如，在本例中，当鼠标指针移出 Inner 元素时，将向该元素发送 mouseout 事件，然后向上传输至 Outer。这可能会在不合时宜的时候触发绑定的 mouseout 处理程序。请参阅有关 .mouseleave() 的讨论以获得有用的替代方法。
So mouseleaveis a custom event, which was designed because of the above reason.
所以mouseleave是一个自定义事件，其目的是因为上述原因。
回答by shyam Jaiswal
Event Mouseout will trigger when mouse leaves the selected element and also when mouse leaves it's child elements also.
当鼠标离开所选元素以及鼠标离开它的子元素时，事件 Mouseout 将触发。
Event Mouseleave element will trigger when pointer will leave the selected element only.
当指针仅离开所选元素时，将触发事件 Mouseleave 元素。
Reference: W3School
参考：W3School
