mouseleaveとは
- ここで説明する mouseleave とは次の語句からなるjQueryのメソッドです。
- mouse
- 読み: マウス
意味: 鼠、ここではパソコンの入力位置を指示するポインティングデバイスのこと。 - leave
- 読み: リーブ
意味: 去る、～離れる
mouseleaveメソッドの概要
このメソッドは、セレクタに該当する既存要素にマウスリーブイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているマウスリーブイベントを呼び出します。
マウスリーブとはブラウザ上でマウスポインターが要素の上に乗っている状態から 外れること を表します。 これは mouseout() と同じように見えますが、 mouseleave() の場合、先祖要素や親要素にイベントのバブリングを起こしません。
イベントのバブリングとは子要素にバインドしているイベントの発生が親要素に伝播して、親要素にバインドしている同種イベントも同時(子要素から順次)に発生する現象のことを言います。 バブリングは「良い」、「悪い」で判断するのではなく、そのような機能であり、状況によってメソッドを選択することが必要です。
構文
サンプルを見る前に構文を確認しておきます。
Selector.mouseleave(Handler(EventObject));
Selector.mouseleave([EventData], Handler(EventObject));
Selector.mouseleave();
- 01: マウスリーブイベントが発生した時点でハンドラーが実行されます。
- 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
- 03: セレクタにバインドしているマウスリーブイベントを呼び出します。
サンプルコードと実行結果
ここでは、先祖、親、子の3つの要素を div で構成しています。
この要素らに mouseleave() を使ってマウスリーブイベントをバインドします。 実行されるハンドラーはアニメーションで要素の透過処理を調整するものです。
ここで動作の確認をしていただきたいのは、イベントのバブリングです。 参考として同じハンドラーをマウスアウトイベントでバインドしているものも用意しましので違いを見てください。
サンプルコード: CSS
<style>
.clsAncestors, .clsParents, .clsChildren{
border: thin solid currentColor;
margin: auto;
padding: 2em;
}
.clsAncestors{
background-color: ##lightblue;
}
.clsParents{
background-color: ##lightgreen;
}
.clsChildren{
background-color: ##lightpink;
}
</style>
- ※ 詳細は割愛しますが 先祖、親、子のそれぞれに背景色を割りあてて要素を視認しやすくしています。
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class ="clsAncestors">
<div class ="clsParents">
<div class ="clsChildren">mouseleave</div>
</div>
</div>
<script>...</script>
</body>
- 06-10: <div class="clsAncestors"></div> (先祖要素です。)
- 07-09: <div class="clsParents"></div> (親要素です。)
- 08: <div class="clsChildren"></div> (子要素です。)
サンプルコード: script
<script>
$("div").mouseleave(function(){
$(this).animate({"opacity":"0"}, 200).animate({"opacity":"1"}, 200);
});
</script>
- 02-04: $("div").mouseleave(Handler) (div 要素にマウスリーブイベントをバインドします。イベントが発生すると Handler が実行されます。)
- 03: animate() (アニメーションを実行するメソッドです。)
下記のサンプルはバブリング動作の違いを視覚的に見る為に mouseout (マウスアウト) イベントで同じハンドラーを実行するように作成しました。 動作の参考にしてください。