小粋空間  -  a cheap joke and a play on words site

stopPropagation()について

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

１．stopPropagation()とは

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

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

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

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

２．イベント伝播を止めるサンプル

ここでは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を指定しておくのがポイントです。