Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

イベント処理を中断するには?(preventDefault/stopPropagation/stopImmediatePropagation)

2015年7月2日

イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明する。また、それぞれの使い分け方法も解説する。

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

 イベントリスナーによる処理を中断するには、イベントオブジェクトの以下のメソッドを利用します。

  • preventDefault
  • stopPropagation
  • stopImmediatePropagation

 それぞれの違いを理解するには、サンプルで具体的な動作を確認した方が早いでしょう。以下は、入れ子になった<div id="outside">要素(外側)に一つ、<a id="inside">要素に二つのイベントリスナーを、それぞれ設置した例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div id="outside">
  <p>上位のテキスト</p>
  <p>
    <a id="inside" href="http://www.web-deli.com/">サンプルページへ</a>
  </p>
</div>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  $('#inside').click(function(e) {
    window.alert('#insideリスナー1が呼び出されました。');
    // 1
    //e.preventDefault();
    // 2
    //e.stopPropagation();
    // 3
    //e.stopImmediatePropagation();
  });

  $('#inside').click(function(e) {
    window.alert('#insideリスナー2が呼び出されました。');
  });

  $('#outside').click(function(e) {
    window.alert('#outsideリスナーが呼び出されました。');
  });
});
</script>
</body>
</html>
イベントキャンセル系のメソッドを確認するためのコード(cancel.html)

 サンプルの13をそれぞれコメントインして、アンカータグ(=<a>タグ)をクリックした場合の結果を確認していきます。

13を全てコメントアウトした状態

 特にイベントがキャンセルされないデフォルトの状態です。この場合、以下のような順番でリスナーが動作します。

  • #insideリスナー1
  • #insideリスナー2
  • #outsideリスナー
  • リンクに従って別ページに移動

 ここでアンカータグ(#inside)のリスナーだけでなく、<div id="outside">(#outside)のリスナーが実行されるのは、イベントバブリングという性質があるためです。イベントバブリングとは、文書ツリーの下の階層で発生したイベントがそのまま上の階層に伝播する性質のことを言います。イベントが上にさかのぼっていく様子を泡(bubble)になぞらえて、このように呼ぶのです。

 かくして、全てのイベントリスナーが実行された後、最後に要素既定のイベント動作を実行します。要素既定のイベント動作とは、例えばアンカータグであれば、href属性で指定されたページへのジャンプです*1

  • *1 その他、例えばテキストボックスに対してキーを押したら文字が反映される、サブミットボタンを押したらフォームが送信されるなども、要素既定のイベント動作です。

1preventDefaultメソッドをコメントインした場合

 この場合、以下のような順番でリスナーが動作します。

  • #insideリスナー1
  • #insideリスナー2
  • #outsideリスナー

 preventDefaultメソッドを利用することで、要素既定(default)のイベント動作をキャンセル(prevent)するわけです。

2stopPropagationメソッドをコメントインした場合

 この場合、以下のような順番でリスナーが動作します。

  • #insideリスナー1
  • #insideリスナー2
  • リンクに従って別ページに移動

 stopPropagationメソッドは、イベントバブリングを抑制します。結果、<a id="inside">要素で発生したイベントは、上位の<div id="outside">要素へは伝播しなくなりますので、#outsideリスナーだけがスキップされます。

3stopImmediatePropagationメソッドをコメントインした場合

 この場合、以下のような順番でリスナーが動作します。

  • #insideリスナー1
  • リンクに従って別ページに移動

 stopImmediatePropagationメソッドはイベントバブリングを抑制すると共に、現在の要素に関連付いた他のリスナー実行も停止します。結果、#insideリスナー2、#outsideリスナー共に実行されなくなります。

 以上の結果に基づいて、それぞれのメソッドの動作をまとめると、以下のようになります。よって、#insideリスナー1以降の全ての動作を停止するならば、preventDefaultメソッドとstopImmediatePropagationメソッドの両方を呼び出せばよいということになります。

メソッド要素既定の動作イベントバブリング別のリスナー
preventDefault 停止
stopPropagation 停止
stopImmediatePropagation 停止 停止
イベントキャンセル系のメソッドの動作
処理対象:イベントオブジェクト カテゴリ:イベント
API:event.preventDefault()|event.stopPropagation()|event.stopImmediatePropagation() カテゴリ:Events(イベント) > Event Object

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

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

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

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

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

jQuery逆引きリファレンス
22. 【現在、表示中】≫ イベント処理を中断するには?(preventDefault/stopPropagation/stopImmediatePropagation)

イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明する。また、それぞれの使い分け方法も解説する。

jQuery逆引きリファレンス
23. 非同期通信で取得したコンテンツをページに反映させるには?(load)

loadメソッドを使って、外部のWebページを非同期に取得して、それをコンテンツ内の要素に反映させる方法を説明する。

jQuery逆引きリファレンス
24. あらかじめ用意されたアニメーションを実行するには?(show/hide/fadeIn/fadeOut/slideUp/slideDown)

jQueryが提供する基本的なアニメーション機能を活用して、要素を表示/非表示、フェードイン/アウト、スライドアップ/ダウンさせる方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!