jQuery逆引きリファレンス

jQuery逆引きリファレンス

マウスポインターが要素に出入りした時の処理を実装するには?(mouseover、mouseout、mouseenter、mouseleave、hover)

2015年5月21日

違いが分かりにくい「mouseover/mouseout」と「mouseenter/mouseleave」イベントの使い分け方法を解説。また、これらに関連する「hover」イベントメソッドについても説明する。

  • このエントリーをはてなブックマークに追加

 別稿「イベントに応じて処理を実行するには?」の表でも触れたように、jQueryではさまざまな<イベント名>メソッドが標準で用意されています。そのうち、ほとんどが直感的に理解できるものばかりですが、mouseovermouseoutmouseentermouseleaveの違いは一見して分かりにくいものです。

 本稿では、具体的なサンプルの中で、両者の違いを示すと共に、マウスの出入りを簡単に検出するhoverメソッドについても触れます。

mouseover/mouseoutとmouseenter/mouseleaveイベントの基本

 まずは、具体的なサンプルを見てみます。以下は、マウスポインターが画像に乗った時に画像を切り替え、外れた時に元に戻すサンプルです。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<img id="icon" src="http://re.buildinsider.net/web/jqueryref/index/icon.s.png" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  $('#icon')
    // マウスポインターが画像に乗った時の動作
    .mouseover(function(e) {
      $(this).attr('src', 'http://re.buildinsider.net/web/jqueryref/index/icon.l.png');
    })
    // マウスポインターが画像から外れた時の動作
    .mouseout(function(e) {
      $(this).attr('src', 'http://re.buildinsider.net/web/jqueryref/index/icon.s.png');
    });
});
</script>
</body>
</html>
マウスの出入りで画像を切り替える例(mouseover.html)
画像にマウスカーソルを乗せると……

画像にマウスカーソルを乗せると……

マウスポインターの出入りで表示画像を切り替える

 それぞれmouseovermouseoutイベントのタイミングで画像(src属性)を変更しているわけです。mouseovermouseoutmouseentermouseleaveに置き換えても、このサンプルはそのまま動作します。

mouseover/mouseoutとmouseenter/mouseleaveの違い

 基本的な挙動は同じであることを確認できたところで、両者が異なるケースを見ていきます。両者が異なる挙動を採るのは、要素が入れ子になっているようなケースです。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
#parent { height: 200px; width: 200px; margin-left: 50px; padding: 10px; border: 3px solid #000; }
#child { height: 100px; width: 100px; margin-left: 40px; padding: 10px; border: 2px solid #F00; }
</style>
</head>
<body>
<div id="parent">
  親(parent)
  <p id="child">
    子(child)
  </p>
</div>
<div id="result"></div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  $('#parent')
    // マウスポインターが画像に乗った時の動作
    .mouseover(function(e) {
      console.log('mouseover:' + e.target.id);
    })
    // マウスポインターが画像から外れた時の動作
    .mouseout(function(e) {
      console.log('mouseout:' + e.target.id);
  });
});
</script>
</body>
</html>
入れ子になった要素に対してマウスイベントを設置した例(mouseover2.html)

 このようなページに対して、対象の要素を横一線に横断するようにマウスポインターを動かした場合の結果は以下の通りです。

マウスイベント発生の様子を確認(mouseover/mouseoutイベント)
マウスイベント発生の様子を確認(mouseover/mouseoutイベント)

 mouseovermouseoutイベントが、外側の要素を出入りした時だけでなく、外側⇔内側の要素を出入りした時にも発生したことが確認できます。

 では、上のコードを、それぞれmouseentermouseleaveイベントで書き換えてみるとどうでしょう。同じようにマウスポインターを動かしてみると、以下のような結果になります。

マウスイベント発生の様子を確認(mouseenter/mouseleaveイベント)
マウスイベント発生の様子を確認(mouseenter/mouseleaveイベント)

 今度は、外側の要素に出入りした場合にだけイベントが発生し、外側⇔内側の要素を行き来した場合にはイベントは発生しないことが確認できます。

mouseenter/mouseleaveイベントを1つにまとめる

 mouseentermouseleaveは、その性質上、まとめて利用することが多いイベントです。そこでjQueryでは、これらをひとまとめに設定するためにhoverというメソッドを用意しています。

[構文]hoverメソッド

$(セレクター式).hover(
  function(e) {
    ……mouseenterイベントに対応する処理……
  },
  function(e) {
    ……mouseleaveイベントに対応する処理……
  }
);

 例えば以下は、冒頭のサンプルをhoverメソッドで置き換えた例です。mouseentermouseleaveイベントの処理を1つのブロックの中で表現できるので、両者がひとまとまりであるということをより明示的に表現できます。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<img id="icon" src="http://re.buildinsider.net/web/jqueryref/index/icon.s.png" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  $('#icon').hover(
    // マウスポインターが画像に乗った時の動作
    function(e) {
      $(this).attr('src', 'http://re.buildinsider.net/web/jqueryref/index/icon.l.png');
    },
    // マウスポインターが画像から外れた時の動作
    function(e) {
      $(this).attr('src', 'http://re.buildinsider.net/web/jqueryref/index/icon.s.png');
    }
  );
});
</script>
</body>
</html>
マウスポインターの出入りをhoverメソッドで監視(hover.html)
処理対象:イベントリスナー カテゴリ:イベント

※以下では、本稿の前後を合わせて5回分(第17回~第21回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

17. 文書ツリー上に存在しない要素に対してイベントリスナーを追加するには?(on)

onメソッドを利用して、動的に新規追加された要素にイベントリスナーを設置する方法を解説。またjQuery 1.6以前のbind/live/delegateメソッドをonメソッドに置き換える方法も説明する。

18. イベントリスナーを呼び出す際にパラメーターを引き渡すには?(data)

イベントメソッドやonメソッドの呼び出し時に、任意のパラメーターを引き渡す方法を解説する。

19. 【現在、表示中】≫ マウスポインターが要素に出入りした時の処理を実装するには?(mouseover、mouseout、mouseenter、mouseleave、hover)

違いが分かりにくい「mouseover/mouseout」と「mouseenter/mouseleave」イベントの使い分け方法を解説。また、これらに関連する「hover」イベントメソッドについても説明する。

20. 一度だけ実行されるイベントリスナーを設置するには?(one)

登録されたイベントリスナーを最初の一度だけ実行するoneメソッドの基本的な使い方を解説する。

21. イベントが発生した時のマウス情報を取得するには?(イベントオブジェクト)

クリックした位置の座標や、押されたマウスボタンの種類といったマウス情報を、イベントオブジェクトの各種プロパティを使って取得する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社