stopPropagation 関数を使用して JavaScript_javascript スキルでイベントの伝播を停止する例-jsチュートリアル-php.cn

stopPropagation 関数を使用して JavaScript_javascript スキルでイベントの伝播を停止する例

WBOY

リリース： 2016-05-16 16:38:26

オリジナル

1640 人が閲覧しました

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 イベントのバブリングに関する情報を検索してください。