stopPropagation()について

stopPropagation()について

Posted at November 22,2013 1:55 AM
Tag:[JavaScript, stopPropagation]

jQueryおよびJavaScriptのstopPropagation()について調べてみました。

1.stopPropagation()とは

stopPropagation()は、現在のイベントの親要素への伝播(propagation)止めるためのメソッドです。

「イベント」とは、分かりやすい例で言うと、フォームのテキストエリアの入力やチェックボックスのチェック、リンクのクリックなどが挙げられます。

stopPropagation()でイベントの伝播がキャンセルされると、テキストエリアの入力やチェックボックスのチェック、リンクのクリックなどのイベントの伝播は行われません。

なお、stopPropagation()でイベントのキャンセル自体は行われません。イベントのキャンセルを行うにはpreventDefault()を利用します。

2.イベント伝播を止めるサンプル

ここではjQueryを使ってイベント伝播のサンプルを作ってみました。

イベント伝播を止めるサンプル
イベント伝播を止めないサンプル

イベント伝播を止めるサンプルのコード(抜粋)は以下となります。

<div id="grandparent">
  <div id="parent">
    <div id="child">クリックするとアラートを表示</a>
  </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("div").on("click", function(event){
    event.stopPropagation();
    alert("クリックされたターゲット要素:" + event.currentTarget.tagName);
});
</script>

一番内側のdiv要素をクリックすると、イベント伝播を止めないサンプルは3回alert()が実行されますが、イベント伝播を止めるサンプルはevent.preventDefault()が実行されているため、alert()は1回しか実行されません。

なお、JavaScriptでイベントを登録する場合は次のようにします。

<div id="grandparent">
  <div id="parent">
    <div id="child">クリックするとアラートを表示</a>
  </div>
</div>
<script>
function myHandler(event){
    event.stopPropagation();
    alert("クリックされたターゲット要素:" + event.currentTarget.tagName);
}
document.getElementById('child').addEventListener('click', myHandler, false );
document.getElementById('parent').addEventListener('click', myHandler, false );
document.getElementById('grandparent').addEventListener('click', myHandler, false );
</script>

addEventListenerの第3引数にfalseを指定しておくのがポイントです。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)