jQueryのmouseout（）とmouseleave（）の違い

投稿日: 2019-11-05 2019-11-05
タグ: jquery, mouse event

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

getdocs

13036