interface Web
js tutoriel
Comment Javascript empêche les événements de bouillonner et l'événement lui-même de se produire
Comment Javascript empêche les événements de bouillonner et l'événement lui-même de se produire
Dans Javascript le bouillonnement d'événement est généré par le nœud, puis affecte le nœud parent, s'élevant étape par étape, et finalement affectant lentement la page entière, mais parfois nous voulons empêcher l'apparition d'un bouillonnement d'événement ou même l'événement lui-même est arrivé ? Cet article vous amène à le découvrir ensemble.
1. Empêcher l'événement de se produire
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.boxA {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: blue;
text-align: center;
}
.boxB {
width: 200px;
height: 200px;
margin: 50px;
background-color: green;
line-height: 200px;
color: #fff;
}
</style>
</head>
<body>
<div class="boxA">
<div class="boxB">boxB</div>
</div>
<script>
var boxA = document.querySelector('.boxA');
var boxB = document.querySelector('.boxB');
boxA.onclick = function (e) {
console.log('我被点击了boxA');
};
boxB.onclick = function (e) {
e.cancelBubble=true; //不冒泡
console.log('我被点击了boxB');
};
</script>
</body>
</html>2. Empêcher l'événement lui-même de se produire
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<form action="http://www.php.cn" method="POST">
<button type="submit">按钮1</button>
</form>
<body>
<script>
const btn=document.querySelector("button");
console.log(btn);
btn.addEventListener("click",function(e){
e.preventDefault();
});
</script>
</body>
</html>Recommandé : "Questions et réponses de l'entretien js 2021 (grand résumé) "
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
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)
Comprendre le mécanisme de bouillonnement d'événements : Pourquoi un clic sur un élément enfant affecte-t-il l'événement de l'élément parent ?
Jan 13, 2024 pm 02:55 PM
Comprendre le bouillonnement d'événements : pourquoi un clic sur un élément enfant déclenche-t-il un événement sur l'élément parent ? Le bouillonnement d'événements signifie que dans une structure d'éléments imbriqués, lorsqu'un élément enfant déclenche un événement, l'événement sera transmis à l'élément parent couche par couche comme un bouillonnement, jusqu'à l'élément parent le plus à l'extérieur. Ce mécanisme permet aux événements sur les éléments enfants de se propager dans toute l'arborescence des éléments et de déclencher tour à tour tous les éléments associés. Pour mieux comprendre le bouillonnement d'événements, examinons un exemple de code spécifique. Code HTML : <divid="parent&q
Pourquoi l'événement click dans js ne peut-il pas être exécuté à plusieurs reprises ?
May 07, 2024 pm 06:36 PM
Les événements de clic en JavaScript ne peuvent pas être exécutés à plusieurs reprises en raison du mécanisme de propagation des événements. Pour résoudre ce problème, vous pouvez prendre les mesures suivantes : Utiliser la capture d'événement : Spécifiez un écouteur d'événement à déclencher avant que l'événement ne se déclenche. Remise des événements : utilisez event.stopPropagation() pour arrêter le bouillonnement des événements. Utilisez une minuterie : déclenchez à nouveau l'écouteur d'événements après un certain temps.
Pourquoi le bouillonnement d'événements se déclenche-t-il deux fois ?
Feb 22, 2024 am 09:06 AM
Pourquoi le bouillonnement d'événements se déclenche-t-il deux fois ? Le bouillonnement d'événement (Event Bubbling) signifie que dans le DOM, lorsqu'un élément déclenche un événement (comme un événement de clic), l'événement bouillonne de l'élément vers l'élément parent jusqu'à ce qu'il bouillonne vers l'objet document de niveau supérieur. La diffusion d'événements fait partie du modèle d'événement DOM, qui permet aux développeurs de lier des écouteurs d'événements aux éléments parents, de sorte que lorsque des éléments enfants déclenchent des événements, ceux-ci puissent être capturés et traités via le mécanisme de diffusion. Cependant, les développeurs rencontrent parfois des événements qui se déclenchent deux fois.
Raisons et solutions de l'échec de jQuery .val()
Feb 20, 2024 am 09:06 AM
Titre : Raisons et solutions de l'échec de jQuery.val() Dans le développement front-end, jQuery est souvent utilisé pour faire fonctionner des éléments DOM. La méthode .val() est largement utilisée pour obtenir et définir la valeur des éléments de formulaire. Cependant, nous rencontrons parfois des situations où la méthode .val() échoue, entraînant l'incapacité d'obtenir ou de définir correctement la valeur de l'élément de formulaire. Cet article explorera les causes de l'échec de .val(), fournira les solutions correspondantes et joindra des exemples de code spécifiques. 1.Méthode d'analyse des causes.val()
Pour quels scénarios les modificateurs d'événements dans vue peuvent-ils être utilisés ?
May 09, 2024 pm 02:33 PM
Les modificateurs d'événements Vue.js sont utilisés pour ajouter des comportements spécifiques, notamment : empêcher le comportement par défaut (.prevent) arrêter le bouillonnement d'événements (.stop) événement ponctuel (.once) capturer l'événement (.capture) écouter passivement les événements (.passive) Adaptatif modificateur (.self)Modificateur de touche (.key)
Quels événements JS ne bouillonnent pas ?
Feb 19, 2024 pm 09:56 PM
Quelles sont les situations dans les événements JS qui ne bouillonneront pas ? Le bouillonnement d'événements (Event Bubbling) signifie qu'après le déclenchement d'un événement sur un certain élément, l'événement sera transmis vers le haut le long de l'arborescence DOM, de l'élément le plus interne à l'élément le plus externe. Cette méthode de transmission est appelée bouillonnement d'événements. Cependant, tous les événements ne peuvent pas surgir. Il existe des cas particuliers dans lesquels les événements ne surgissent pas. Cet article présentera les situations en JavaScript dans lesquelles les événements ne bouillonneront pas. 1. Utilisez stopPropagati
Qu'est-ce que le bouillonnement d'événements ? Analyse approfondie du mécanisme de bouillonnement des événements
Feb 20, 2024 pm 05:27 PM
Qu’est-ce que le bouillonnement d’événements ? Analyse approfondie du mécanisme de diffusion d'événements. La diffusion d'événements est un concept important dans le développement Web, qui définit la manière dont les événements sont diffusés sur la page. Lorsqu'un événement sur un élément est déclenché, l'événement sera transmis à partir de l'élément le plus interne et transmis vers l'extérieur jusqu'à ce qu'il soit transmis à l'élément le plus externe. Cette méthode de livraison est comme des bulles bouillonnant dans l’eau, c’est pourquoi on l’appelle bouillonnement événementiel. Dans cet article, nous analyserons en profondeur le mécanisme de bouillonnement d’événements. Le principe du bouillonnement d’événements peut être compris à travers un exemple simple. Supposons que nous ayons un H
Quels sont les événements JS qui ne bouillonnent pas ?
Feb 18, 2024 pm 06:31 PM
Quels sont les événements JS qui ne bouillonneront pas ? JavaScript est un langage de script puissant qui ajoute de l'interactivité et du dynamisme aux pages Web. En JavaScript, la programmation événementielle est une partie très importante. Les événements font référence à diverses opérations effectuées par les utilisateurs sur des pages Web, telles que des clics sur des boutons, des mouvements de souris, des saisies au clavier, etc. JavaScript répond à ces événements via des fonctions de gestion d'événements et effectue les opérations correspondantes. La diffusion d'événements est un mécanisme courant lors du traitement des événements. Le bouillonnement d'un événement signifie que lorsqu'un
