javascript - Javascript イベントが子要素に影響を与えないようにする

Question

要素を作成するスクリプトがあり、作成プロセスの一部として (addEventListener を使用して) onclick イベントを追加しますが、子要素をクリックすると、親の onclick イベントがトリガーされます。ソースが子要素の場合、クリックが検出されないようにするにはどうすればよいですか?

Answer 1

を使用しevent.stopPropagation()ます。これにより、Javascript イベントのバブリングが停止し、対象の要素に適用されたイベントのみが実行されます。

window.addEventListener("click", function(event){

    // event here

    event.stopPropagation();
}, false);

Answer 2

問題は、イベントが親にバブリングしていることです。

子のonclickイベントで、イベントに伝達を停止するように指示します。

onclick = function (event) {
    // ...
    event.stopPropagation();
};

Answer 3

親クリック ハンドラー: (クリックされた要素の ID を確認します)

function handler(e){
  if(e.target.id != "parentID") return;
  ....
}