JavaScript でイベントのバブリングを防ぐ方法

注意すべき点は、イベントバブリング自体の特性上、メリットだけでなくデメリットも生じるということです。これについては、次回以降のブログで詳しく説明します。

そこで、ここではイベントのバブリングを防ぐ方法について説明します。
たとえば、現在、子ボックスと親ボックスがあります。子ボックスと親ボックスの両方にクリックイベントがありますが、この時点では、子ボックスをクリックしたときに、子ボックスにのみクリックイベントが表示されるようにします。ここでは、イベントのバブリングを防止する方法を使用して、親ボックスのイベント表示を分離する必要があります。

まず、次に示すように 2 つのボックスを作成し、それらにクリックイベントを追加します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        。父親{
            マージン: 100px 自動;
            幅: 100ピクセル;
            高さ:100px;
            オーバーフロー: 非表示;
            背景色: 淡い緑;
        }
        。息子{
            幅: 50px;
            高さ: 50px;
            左マージン: 25px;
            上マージン: 25px;
            背景色: 淡いターコイズ;
        }
    </スタイル>
</head>
<本文>
    <div class="父">
        <div class="son"></div>
    </div>
    <スクリプト>
        var 父親 = document.querySelector('.父親');
        var son = document.querySelector('.son');
       son.addEventListener('click',function(){
            警告('息子');
        }、間違い）
        父親.addEventListener('click',function(){
            警告('父');
        }、間違い）
    </スクリプト>
</本文>
</html>

子ボックスのクリックイベントをクリックすると、印刷結果は次のようになります。

親ボックスのクリックイベントをブロックするにはどうすればよいでしょうか?

サブボックス内のクリックイベントにstopPropagation()メソッドを直接追加できます。

以下のように表示されます。

son.addEventListener('click',function(e){
            警告('息子');
            e.stopPropagation();
        }、間違い）

この時点での実行結果は次のとおりです。

成功を阻止します。

ただし、この方法にも互換性の問題があることに注意してください。下位バージョンのブラウザ (IE 6 ～ 8) では、通常、イベントオブジェクトの cancelBubble プロパティが操作に使用されます。つまり、対応するクリックイベントに直接追加します。

e.cancelBubble = true;

この互換性の問題を解決したい場合は、次の方法を使用できます。

if(e && e.stopPropagation){
      e.stopPropagation();
  }それ以外{
      ウィンドウのイベントをキャンセルするには、次の手順を実行します。
  }

JavaScript によるイベントバブリングの防止に関するこの記事はこれで終わりです。JavaScript によるイベントバブリングの防止に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: