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

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

WBOYoriginal: 2016-05-16 16:38:261641parcourir

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Native js imite jq pour déterminer si le navigateur actuel est conforme aux compétences ie6~8_javascriptArticle suivant：Native js imite jq pour déterminer si le navigateur actuel est conforme aux compétences ie6~8_javascript

Articles Liés

Voir plus