jQuery逆引きリファレンス
イベント処理を中断するには？（preventDefault／stopPropagation／stopImmediatePropagation）
イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明する。また、それぞれの使い分け方法も解説する。
イベントリスナーによる処理を中断するには、イベントオブジェクトの以下のメソッドを利用します。
- preventDefault
- stopPropagation
- stopImmediatePropagation
それぞれの違いを理解するには、サンプルで具体的な動作を確認した方が早いでしょう。以下は、入れ子になった<div id="outside">要素（外側）に一つ、<a id="inside">要素に二つのイベントリスナーを、それぞれ設置した例です。
|
<!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>
|
サンプルの1～3をそれぞれコメントインして、アンカータグ（＝<a>タグ）をクリックした場合の結果を確認していきます。
1～3を全てコメントアウトした状態
特にイベントがキャンセルされないデフォルトの状態です。この場合、以下のような順番でリスナーが動作します。
- #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］を参照してください。
21. イベントが発生した時のマウス情報を取得するには？（イベントオブジェクト）
クリックした位置の座標や、押されたマウスボタンの種類といったマウス情報を、イベントオブジェクトの各種プロパティを使って取得する方法を説明する。
22. 【現在、表示中】≫ イベント処理を中断するには？（preventDefault／stopPropagation／stopImmediatePropagation）
イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明する。また、それぞれの使い分け方法も解説する。
24. あらかじめ用意されたアニメーションを実行するには？（show／hide／fadeIn／fadeOut／slideUp／slideDown）
jQueryが提供する基本的なアニメーション機能を活用して、要素を表示／非表示、フェードイン／アウト、スライドアップ／ダウンさせる方法を説明する。
