ホームページ > 記事 > ウェブフロントエンド > stopPropagation 関数を使用して JavaScript_javascript スキルでイベントの伝播を停止する例
stopPropagation 関数を使用して JavaScript_javascript スキルでイベントの伝播を停止する例
- WBOYオリジナル
- 2016-05-16 16:38:261641ブラウズ
JS のイベントはデフォルトでバブリングし、層ごとに上向きに伝播します。 stopPropagation() 関数を使用して、DOM 階層内のイベントの伝播を停止できます。次の例のように:
HTML コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>stopPropagation()使用 - 琼台博客</title>
</head>
<body>
<button>button</button>
</body>
</html>
[/code]
没有加stopPropagation()
[code]
var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
alert('button click');
};
document.body.onclick=function(event){
alert('body click');
}
DOMはレイヤーごとに上に伝播していくので、ボタンボタンをクリックするとボディレイヤーにも伝播し、ボディレイヤーのクリックにも反応します。その結果、ボタンと本体という 2 つの警告ボックスが表示されます。
stopPropagation() を追加しました
var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
alert('button click');
// 停止DOM事件层次传播
event.stopPropagation();
};
document.body.onclick=function(event){
alert('body click');
}
ボタンのクリックイベント処理関数ではstopPropagation()を使用してイベント伝播機能を停止しているため、ボタンクリックイベントからの警告ボックスがポップアップした後は本体に伝播できず、本体の警告ボックスも停止します。再度ポップアップすることはなく、その結果、警告ボックスは 1 回だけ表示されます。
多くの子供たちが JS を書くとき、DOM イベントが層ごとに上向きに伝播するという特徴を無視して、プログラムの異常を引き起こすことがよくあります。さらに詳しい知識が必要な場合は、JS イベントのバブリングに関する情報を検索してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。