バブリングイベントとは何ですか？
つまり、複数の div がネストされている場合、つまり親子関係が確立されている場合、親 div と子 div が onclick イベントに参加し、子 div の onclick イベントがトリガーされると、子 div が対応する処理を実行します。 jsの操作。ただし、親 div の onclick イベントもトリガーされます。その結果、複数のレベルでイベントが同時実行され、ページの混乱が生じます。これはバブリングイベントです。
バブリングイベントを排除する方法
JavaScript イベントのバブリングを防止する (cancelBubble、stopPropagation)
次のコードは、バブリング効果とは何か、バブリング効果の除去とは何かを非常によく説明しています。
次のようにコードをコピーします。
<html>
<頭>
<title> JavaScript イベントのバブリングを防止する (cancelBubble、stopPropagation)</title>
<meta name="keywords" content="JavaScript、イベントバブリング、cancelBubble、stopPropagation" />
<script type="text/javascript">
関数 doSomething (obj,evt) {
アラート(obj.id);
var e=(evt)?evt:window.event; //ブラウザの種類を決定し、IE カーネルに基づいてブラウザで cancelBubble を使用します。
if (ウィンドウ.イベント) {
e.cancelBubble=true;
} それ以外 {
//e.preventDefault(); //Firefox カーネルに基づくブラウザで stopPropagation メソッドをサポートします。
e.stopPropagation();
}
}
</script>
</head>
<本文>
<div id="parent1" onclick="alert(this.id)">
<p>これはparent1 divです。</p>
<div id="child1" onclick="alert(this.id)">
<p>これは子供 1 です。</p>
</div>
<p>これはparent1 divです。</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)">
<p>これはparent2 divです。</p>
<div id="child2" onclick="doSomething(this,event);">
<p>これは子供 2 です。</p>
</div>
<p>これはparent2 divです。</p>
</div>
</body>
</html>
コードを直接コピーした後、child1 をクリックすると、child1 ダイアログ ボックスだけでなく、parent1 ダイアログ ボックスもポップアップします。
これがバブリングイベントです
ただし、chile2 をクリックすると、child2 のみがポップアップされ、parent2 は表示されません。これは、バブリング イベントを防ぐ特殊効果を適用した結果です。