Exemple d'utilisation de la fonction stopPropagation pour arrêter la propagation d'événements dans les compétences JavaScript

Exemple d'utilisation de la fonction stopPropagation pour arrêter la propagation d'événements dans les compétences JavaScript_javascript

WBOY

Libérer： 2016-05-16 16:38:26

original

1641 Les gens l'ont consulté

Les événements dans JS bouillonnent par défaut, se propageant vers le haut couche par couche. Vous pouvez arrêter la propagation des événements dans la hiérarchie DOM via la fonction stopPropagation(). Comme l'exemple suivant :

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

Copier après la connexion

Le DOM se propage vers le haut couche par couche, donc cliquer sur le bouton se propage également au calque corps, donc le clic sur le calque corps répond également. En conséquence, deux boîtes d'avertissement apparaissent, à savoir le bouton et le corps.

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

Copier après la connexion

Le stopPropagation() est utilisé dans la fonction de traitement des événements de clic du bouton pour arrêter la fonction de propagation de l'événement. Par conséquent, une fois que la boîte d'avertissement de l'événement de clic du bouton apparaît, elle ne peut pas être propagée au corps et la boîte d'avertissement du corps. ne réapparaîtra pas, le résultat est que la boîte d'avertissement n'est discutée qu'une seule fois.

Lorsque de nombreux enfants écrivent du JS, ils ignorent souvent la caractéristique des événements DOM se propageant couche par couche, provoquant des anomalies du programme. Si vous avez besoin de connaissances plus approfondies, vous pouvez rechercher des informations sur le bouillonnement d'événements JS.