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.
