jQuery的mouseout（）和mouseleave（）有什麼區別？

Question

jQuery的mouseout（）和mouseleave（）有什麼區別？

Answer 1

mouseleave事件與處理事件冒泡的方式不同。如果在此示例中使用了mouseout，那麼當鼠標指針移出Inner元素時，處理程序將被觸發。這通常是不受歡迎的行爲。另一方面，mouseleave事件只在鼠標離開綁定元素時觸發其處理程序，而不是後代。所以在這個例子中，當鼠標離開Outer元素時觸發處理程序，而不是Inner元素。

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

令人驚訝的是很多結果@http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=jquery+mouseleave+mouseout+difference

Answer 2

jQuery的API文檔：

mouseout

此事件類型可能會由於事件令人頭痛冒泡。例如，在這個例子中，當鼠標指針移出Inner元素時，一個mouseout事件將被髮送到該元素，然後涓涓細流到Outer。這可以在不合時宜的時間觸發綁定的鼠標移出處理程序。請參閱.mouseleave（）的討論以獲得有用的替代方法。

所以mouseleave是一個自定義事件，它是基於上述原因而設計的。

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

Answer 3

可以有時間時mouseout比mouseleave一個更好的選擇。

例如，假設您已經創建了一個工具提示，您想在mouseenter上顯示一個元素旁邊顯示的工具提示。您使用setTimeout來防止工具提示即刻彈出。您使用clearTimeout清除mouseleave上的超時，因此如果鼠標離開工具提示將不會顯示。 這將工作99％的時間。

但現在假設您有連接到一個提示的元素是一個click事件的按鈕，讓我們也假設這個按鈕會提示用無論是confirm或alert框中的用戶。用戶點擊按鈕和alert火災。用戶按下它足夠快，以至於你的工具提示沒有機會彈出（到目前爲止這麼好）。

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

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