jQueryのmouseout()とmouseleave()の違い
jQueryでは、
mouseout()
と
mouseleave()
の両方のイベントは、マッチした要素からマウスが離れると発生します。子要素の ”
イベントバブリング
“ハンドルの唯一の違いは、2つのシナリオを見てみましょう:
1.子要素なし
一致する要素に子要素がない場合、
mouseout()
と
mouseleave()
の両方のイベントは全く同じです。下に自分自身で試してみてください。
2.子要素が内部にある
一致する要素に子要素がある場合、
mouseout()
と
mouseleave()
のイベントは、「
イベントバブリング
」の仕方によって異なる動作をします。
たとえば、「outerBox」には子要素「innerBox」が含まれています。
<div id="outerBox">OuterBox <div id="innerBox">InnerBox </div> </div>
mouseout()
-
マウスが “outerBox”に入ると、イベントは発生しません.
-
マウスが「outerBox」を離れ、「innerBox」に入ると、
“outerBox”イベント。
-
マウスが “innerBox”を離し、 “outerBox”を入力すると、
“innerBox”イベント、 “outerBox”イベントに従います。
-
マウスが “outerBox”に移動すると、 “outerBox”イベントが発生します.
mouseleave()
-
マウスが “outerBox”に入ると、イベントは発生しません.
-
マウスが「outerBox」を離れて「innerBox」に入ると、イベントは発生しません.
火災。
-
マウスが “innerBox”を離し、 “outerBox”を入力すると、
“innerBox”イベント。
-
マウスが “outerBox”に移動すると、 “outerBox”イベントが発生します.
以下の例を再生して理解してみましょう:
自分で試してみてください
<html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> #mouseout-outerBox1, #mouseleave-outerBox1, #mouseout-outerBox2, #mouseleave-outerBox2{ margin:8px; border:1px groove #999966; background-color : #999966; width:150px; height:150px; color:white; } #mouseout-innerBox2, #mouseleave-innerBox2{ margin:8px 8px 8px 16px; border:1px groove #0000FF; background-color : #0000FF; width:100px; height:100px; color:white; } span{ padding:8px; } .content{ width:500px; height:250px; } .container1{ float:left; padding-right:16px; } </style> </head> <body> <h1>jQuery mouseout() vs mouseleave() example</h1> <div class="content"> <div class="container1"> <span>mouseout() - no child element</span> <div id="mouseout-outerBox1">OuterBox </div> <span id="mouseout-msg1">#mouseout is fired : 0</span> </div> <div class="container1"> <span>mouseleave() - no child element</span> <div id="mouseleave-outerBox1">OuterBox </div> <span id="mouseleave-msg1">#mouseleave is fired : 0</span> </div> </div> <div class="content"> <div class="container1"> <span>mouseout() - with child elements</span> <div id="mouseout-outerBox2">OuterBox <div id="mouseout-innerBox2">InnerBox </div> </div> <span id="mouseout-outer-msg2">#mouseout outer is fired : 0</span> <br/> <span id="mouseout-inner-msg2">#mouseout inner is fired : 0</span> </div> <div class="container1"> <span>mouseleave() - with child elements</span> <div id="mouseleave-outerBox2">OuterBox <div id="mouseleave-innerBox2">InnerBox </div> </div> <span id="mouseleave-outer-msg2">#mouseleave outer is fired : 0</span> <br/> <span id="mouseleave-inner-msg2">#mouseleave inner is fired : 0</span> </div> </div> <script type="text/javascript"> //example 1 var mouseout1=1; $('#mouseout-outerBox1').mouseout(function(event) { $('#mouseout-msg1').text('#mouseout is fired : ' + mouseout1++) }); var mouseleave1=1; $('#mouseleave-outerBox1').mouseleave(function(event) { $('#mouseleave-msg1').text('#mouseleave is fired : ' + mouseleave1++) }); //example 2 var mouseoutouter2=1; $('#mouseout-outerBox2').mouseout(function(event) { $('#mouseout-outer-msg2').text('#mouseout outer is fired : ' + mouseoutouter2++) }); var mouseoutinner2=1; $('#mouseout-innerBox2').mouseout(function(event) { $('#mouseout-inner-msg2').text('#mouseout inner is fired : ' + mouseoutinner2++) }); var mouseleaveouter2=1; $('#mouseleave-outerBox2').mouseleave(function(event) { $('#mouseleave-outer-msg2') .text('#mouseleave outer is fired : ' + mouseleaveouter2++) }); var mouseleaveinner2=1; $('#mouseleave-innerBox2').mouseleave(function(event) { $('#mouseleave-inner-msg2') .text('#mouseleave inner is fired : ' + mouseleaveinner2++) }); </script> </body> </html>
リンク://wp-content/uploads/jQuery/jQuery-mouseout-mouseleave-example.html[デモを試してください]
リンク://タグ/jquery/[jquery]リンク://タグ/マウスイベント/[マウスイベント]