jQueryのmouseout()とmouseleave()で異なる
jQueryでは、マウスが一致した要素を離れると、mouseout()イベントとmouseleave()イベントの両方が発生します。 唯一の違いは、子要素の「event bubbling」ハンドルの方法です。2つのシナリオを見てみましょう。
1. 子要素なし
一致した要素に子要素がない場合、mouseout()イベントとmouseleave()イベントの両方がまったく同じように機能します。 以下で自分で試してみてください。
2. WITH子要素内部
一致した要素に子要素がある場合、mouseout()イベントとmouseleave()イベントの両方が、「event bubbling」の方法で異なる動作をします。
たとえば、「outerBox」には子要素「innerBox」が含まれます。
OuterBoxInnerBox
P.S Assure both outerBox and innerBox are attached to certain events.
mouseout()
-
マウスが「outerBox」に入ると、イベントは発生しません。
-
マウスが「outerBox」から出て「innerBox」に入ると、「outerBox」イベントが発生します。
-
マウスが「innerBox」から出て「outerBox」に入ると、「innerBox」イベントが発生し、「outerBox」イベントが続きます。
-
マウスが「outerBox」に移動したら、「outerBox」イベントを発生させます。
mouseleave()
-
マウスが「outerBox」に入ると、イベントは発生しません。
-
マウスが「outerBox」から出て「innerBox」に入ると、イベントは発生しません。
-
マウスが「innerBox」から出て「outerBox」に入ると、「innerBox」イベントが発生します。
-
マウスが「outerBox」に移動したら、「outerBox」イベントを発生させます。
以下の例を再生して理解しましょう。
自分で試してください
jQuery mouseout() vs mouseleave() example
mouseout() - no child elementOuterBox#mouseout is fired : 0mouseleave() - no child elementOuterBox#mouseleave is fired : 0mouseout() - with child elementsOuterBox#mouseout outer is fired : 0InnerBox
#mouseout inner is fired : 0mouseleave() - with child elementsOuterBox#mouseleave outer is fired : 0InnerBox
#mouseleave inner is fired : 0