トップページ >  JavaScript >  イベントの伝播の停止
初版2013/03/07: 最終更新日2013/03/07
  イベントの伝播の停止
目次
イベントの伝播の停止
イベントの伝播の停止
イベントの伝播を停止するには、stopPropagationを使用します。
以下のようなHTMLがあったとします。

<div onclick="a()">
<span onclick="b()">テスト</span>
</div>

この状態で以下の「テスト」という文字をクリックしてください。

テスト


イベントバブリングによって両方のonclickイベントが実行されるはずですが、onload時にstopPropagationしているため、親要素のイベントは起きません。
以下、ソースです。

<script language="JavaScript">
<!--
window.addEventListener('load', function(){
    document.getElementById('span1').addEventListener("click", function(event){
        event.stopPropagation();
    }, false);
},false);
function a(){
    alert("div");
}
function b(){
    alert("span");
}
// -->
</script>

Chrome25で動作確認済みです。