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

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

目次

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

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

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

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

サンプル HTML

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
</head>

<body>
    <div id="wrapper">
        <div id="content"></div>
    </div>
    <script>
        function divClick(s) {
            console.log(s);
            return function(e) {
                e.stopPropagation();
            }
        }
        document.getElementById('wrapper').addEventListener('click', divClick('wrapper'));
        document.getElementById('content').addEventListener('click', divClick('content'));
    </script>
</body>

</html>

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

まとめ

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

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

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents