2018/09/17JavaScriptのイベントのバブリングとキャンセルのサンプルです。動くサンプルもあります。目次イベントのバブリングイベントのバブリングのキャンセルイベントのバブリング発生したイベントが上位の要素に伝播することです。「イベントの伝播」ともいいます。(propagation)のリンクです。https://developer.mozilla.org/ja/docs/DOM/DOM_Reference/Examples#Example_5.3A_Event_Propagationイベントのバブリングのサンプル一段目をクリックすると、アラートが表示されます。二段目をクリックすると、イベントの伝播のためアラートが2つ表示されます。二段目コード上記サンプルのコードです。alert("二段目のイベントリスナ");});</script>2行目の「一段目」という文字をクリックすると10行目のイベントリスナが実行されます。3行目の「二段目」という文字をクリックすると13行目のイベントリスナが実行された後、10行目のイベントリスナも実行されます。→イベントの伝播(バブリング)です。イベントのバブリングのキャンセルイベントオブジェクト.stopPropagation();イベントのバブリングのキャンセルはstopPropagationメソッドを使用します。イベントオブジェクトのメソッドです。「イベントのキャンセル」は、「イベントの抑制」ともいいます。以下は、MDNのstopPropagationのリンクです。https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagationキャンセルのサンプル一段目をクリックすると、アラートが表示されます。二段目をクリックしても、イベントのバブリングのキャンセルをしているため、アラートは1つしか表示されません。二段目コード上記サンプルのコードです。alert("二段目のイベントリスナ");e.stopPropagation();});</script>15行目にstopPropagationメソッドを追加しています。3行目の「二段目」という文字クリックすると13行目のイベントリスナが実行された後、10行目のイベントリスナは実行されません。