interface Web
js tutoriel
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
May 16, 2016 pm 04:38 PMLes é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.
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript
Dec 17, 2023 pm 02:54 PM
Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript
WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel
Dec 17, 2023 pm 05:30 PM
WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel
Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript
Dec 17, 2023 am 09:39 AM
Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript
Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel
Dec 17, 2023 pm 12:09 PM
Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel
JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel
Dec 17, 2023 pm 05:13 PM
JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel
Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP
Jan 05, 2024 pm 06:08 PM
Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP
Comment obtenir facilement le code d'état HTTP en JavaScript
Jan 05, 2024 pm 01:37 PM
Comment obtenir facilement le code d'état HTTP en JavaScript
Comment utiliser insertBefore en javascript
Nov 24, 2023 am 11:56 AM
Comment utiliser insertBefore en javascript
