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()
  1. マウスが "outerBox"に入ると、イベントは発生しません.

  2. マウスが「outerBox」を離れ、「innerBox」に入ると、

"outerBox"イベント。

  1. マウスが "innerBox"を離し、 "outerBox"を入力すると、

"innerBox"イベント、 "outerBox"イベントに従います。

  1. マウスが "outerBox"に移動すると、 "outerBox"イベントが発生します.

mouseleave()
  1. マウスが "outerBox"に入ると、イベントは発生しません.

  2. マウスが「outerBox」を離れて「innerBox」に入ると、イベントは発生しません.

火災。

  1. マウスが "innerBox"を離し、 "outerBox"を入力すると、

"innerBox"イベント。

  1. マウスが "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]リンク://タグ/マウスイベント/[マウスイベント]