jQuery 的 mouseout() 和 mouseleave() 有什么區別？

Question

jQuery 的 mouseout() 和 mouseleave() 有什么區別？

Answer 1

mouseleave 事件與 mouseout 處理事件冒泡的方式不同。 如果在本例中使用 mouseout，那么當鼠標指針移出 Inner 元素時，將觸發處理程序。 這通常是不受歡迎的行為。 另一方面， mouseleave 事件僅在鼠標離開它所綁定的元素時才觸發其處理程序，而不是后代。 所以在這個例子中，當鼠標離開 Outer 元素而不是 Inner 元素時會觸發處理程序。

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

Answer 2

有時mouseout是比mouseleave更好的選擇。

例如，假設您創建了一個工具提示，希望在mouseenter上的元素旁邊顯示。 您使用setTimeout來防止工具提示立即彈出。 您可以使用clearTimeout清除mouseleave的超時，因此如果鼠標離開，則不會顯示工具提示。 這將在 99% 的情況下起作用。

但是現在讓我們假設您附加了工具提示的元素是一個帶有click事件的按鈕，並且我們還假設此按鈕向用戶提示confirm或alert框。 用戶單擊按鈕並觸發alert 。 用戶按下它的速度足夠快，以至於您的工具提示沒有機會彈出（到目前為止很好）。

用戶按下alert框 OK 按鈕，鼠標離開元素。 但是由於瀏覽器頁面現在處於鎖定狀態，因此在按下 OK 按鈕之前不會觸發 javascript，這意味着您的mouseleave事件不會觸發。 用戶按 OK 后，工具提示將彈出（這不是您想要的）。

在這種情況下使用mouseout將是合適的解決方案，因為它會觸發。

Answer 3

jQuery API 文檔：

mouseout

由於事件冒泡，這種事件類型可能會導致許多頭痛。 例如，在本例中，當鼠標指針移出 Inner 元素時，將向該元素發送 mouseout 事件，然后向上傳輸至 Outer。 這可能會在不合時宜的時候觸發綁定的 mouseout 處理程序。 請參閱有關 .mouseleave() 的討論以獲得有用的替代方法。

所以mouseleave是一個自定義事件，就是因為上面的原因而設計的。

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

Answer 4

當鼠標離開所選元素以及鼠標離開它的子元素時，事件 Mouseout 將觸發。

當指針僅離開所選元素時，將觸發事件 Mouseleave 元素。

參考： W3School

Answer 5

我在使用計划 Javascript 而不是 jquery 時遇到了類似的問題，但它們有一些相關性，如果現在有人在搜索，我會留下我的兩分錢。

我試圖在導航菜單上使用mouseout事件。 父div有一個由ul元素列表組成的子菜單。 當我嘗試導航到div子元素時， mouseout事件被觸發。 這不是我想要的輸出。

從文檔

如果光標進入子元素，mouseout 也會傳遞給元素，因為子元素遮擋了元素的可見區域。

這就是問題所在。

mouseleave事件沒有這個問題。 只是使用它使事情對我有用。

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