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');
}
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');
}
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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
