JavaScript: イベントバブリングによる親要素のイベント実行を停止する

親要素に設定されているクリックイベントにより、リンクやボタン等のクリックイベントが実行されない、先に親要素のイベントが発火してしまう、という問題があります。
今回は、イベントが設定されているネストされた要素の、親要素に設定されているイベントを停止する方法を説明します。

目次

• イベントバブリングで親要素のイベント実行を停止する
• まとめ

イベントバブリングで親要素のイベント実行を停止する

通常、イベント発生時には DOM ツリーのルート (Window) からイベント発生要素を探索（キャプチャ）し、発生要素を特定（ターゲット）後、再びルート (Window) まで遡り（バブリング）ます。

以下のサンプルでは、外側 div (#wrapper)、内側 div (#content) 両方にクリックイベントが設定されています。

サンプル HTML

[code]

[/code]

function divClick 内の e.stopPropagation() により、内側要素 (div#content) クリック時、そこでイベントバブリングが停止し、親要素 (div#wrapper) のクリックイベントは無効となります。

まとめ

このように、JavaScript のイベントバブリングをコントロールすることで、ネストされた要素（外側）のイベントを停止したり、優先順位を思いどおりに設定が可能です。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。