Heim > Artikel > Web-Frontend > Beispiel für die Verwendung der stopPropagation-Funktion zum Stoppen der Ereignisweitergabe in JavaScript_Javascript-Kenntnissen

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

WBOYOriginal: 2016-05-16 16:38:261641Durchsuche

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

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

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Natives js imitiert jq, um festzustellen, ob der aktuelle Browser den Javascript-Kenntnissen von ie6~8_ genau entsprichtNächster Artikel：Natives js imitiert jq, um festzustellen, ob der aktuelle Browser den Javascript-Kenntnissen von ie6~8_ genau entspricht

In Verbindung stehende Artikel

Mehr sehen