Beispiel für die Verwendung der stopPropagation-Funktion zum Stoppen der Ereignisweitergabe in JavaScript_Javascript-Kenntnissen-js-Tutorial-php.cn

Beispiel für die Verwendung der stopPropagation-Funktion zum Stoppen der Ereignisweitergabe in JavaScript_Javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 16:38:26

Original

1640 Leute haben es durchsucht

Ereignisse in JS sprudeln standardmäßig und breiten sich Schicht für Schicht nach oben aus. Sie können die Ausbreitung von Ereignissen in der DOM-Hierarchie durch die Funktion stopPropagation() stoppen. Wie das folgende Beispiel:

HTML-Code:

<!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');
}

Nach dem Login kopieren

Das DOM breitet sich Schicht für Schicht nach oben aus, sodass sich das Klicken auf die Schaltfläche auch auf die Körperebene ausbreitet, sodass auch der Klick auf die Körperebene reagiert. Als Ergebnis werden zwei Warnfelder angezeigt, nämlich „Button“ und „Body“.

stopPropagation() hinzugefügt

var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
  alert('button click');
  // 停止DOM事件层次传播
  event.stopPropagation();
};
 
document.body.onclick=function(event){
  alert('body click');
}

Nach dem Login kopieren

stopPropagation() wird in der Klickereignisverarbeitungsfunktion der Schaltfläche verwendet, um die Ereignisweitergabefunktion zu stoppen. Nachdem das Warnfeld des Schaltflächenklickereignisses angezeigt wird, kann es daher nicht an den Textkörper und das Textwarnfeld weitergegeben werden nicht erneut angezeigt wird, wird das Warnfeld nur einmal besprochen.

Wenn viele Kinder JS schreiben, ignorieren sie oft die Funktion von DOM-Ereignissen, die sich Schicht für Schicht nach oben ausbreiten, was zu Programmanomalien führt. Wenn Sie tiefergehende Kenntnisse benötigen, können Sie nach Informationen zum Bubbling von JS-Ereignissen suchen.