js empêche les événements par défaut et js empêche les événements bouillonnants exemples à partager js empêche les événements bouillonnants

Pour les éléments p imbriqués, si les éléments parent et enfant sont liés à certains événements, l'événement de l'élément parent peut être déclenché lorsque l'on clique sur l'élément enfant le plus interne. Voici une introduction aux événements par défaut de blocage js et au blocage js. événements. Exemple de bouillonnement, veuillez vous y référer
1. event.preventDefault(); – Empêche l'événement par défaut de l'élément.
Remarque : l'événement par défaut pour le saut par clic d'un élément,
événement par défaut pour le bouton, la radio et d'autres éléments de formulaire,
l'élément p n'a pas d'événement par défaut
Exemple :

<a href="http://www.baidu.com" target="_black">百度</a>var samp = document.getElementByTagName("a");
samp.addEventListener("click",function(e){e.preventDefault()},false);

Explication : lorsque vous cliquez sur un lien, un saut se produit dans des circonstances normales, mais maintenant nous avons bloqué son événement par défaut, c'est-à-dire l'événement de saut, il ne passera donc pas à Baidu.

1. event.stopPropagation(); – Empêcher les événements de bouillonnement d'éléments
   Remarque : les éléments imbriqués ont généralement des événements de bouillonnement, qui auront certains effets
   Exemple :

<p id="c1" onclick="alert(1)">
<p id="c2" onlick="alert(2)">
<input type="button" id="c3" value="点击" onclick="alert(3)">
</p>
</p>

Lorsque vous cliquez sur le bouton ici, le navigateur affichera 3, 2 et 1 l'un après l'autre. Au départ, je voulais seulement que l'événement lié au bouton se produise, mais il a été déclenché par inadvertance. . Pour les événements sur ses deux parents, nous venons de faire ici un test simple. Imaginez si lors du développement du projet, un bouton et son parent étaient liés à des événements très importants en même temps, les résultats seraient désastreux. La solution à l’heure actuelle est d’éviter les événements bouillonnants.
Enregistrez l'événement de clic pour l'entrée et évitez son événement bouillonnant

document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);

Pour les éléments p imbriqués, si les éléments parent et enfant sont liés à certains événements, alors lorsque l'enfant le plus interne est cliqué sur Éléments peut déclencher des événements d'éléments parents. Voici des exemples de js empêchant les événements par défaut et de js empêchant la propagation d'événements. Veuillez vous y référer
1. event.preventDefault();
Remarque : l'événement par défaut pour le saut par clic d'un élément,
événement par défaut pour le bouton, la radio et d'autres éléments de formulaire,
l'élément p n'a pas d'événement par défaut
Exemple :

<a href="http://www.baidu.com" target="_black">百度</a>var samp = document.getElementByTagName("a");
samp.addEventListener("click",function(e){e.preventDefault()},false);

Explication : lorsque vous cliquez sur un lien, un saut se produit dans des circonstances normales, mais maintenant nous avons bloqué son événement par défaut, c'est-à-dire l'événement de saut, il ne passera donc pas à Baidu.

1. event.stopPropagation(); – Empêcher les événements de bouillonnement d'éléments
   Remarque : les éléments imbriqués ont généralement des événements de bouillonnement, qui auront certains effets
   Exemple :

<p id="c1" onclick="alert(1)">
<p id="c2" onlick="alert(2)">
<input type="button" id="c3" value="点击" onclick="alert(3)">
</p>
</p>

Lorsque vous cliquez sur le bouton ici, le navigateur affichera 3, 2 et 1 l'un après l'autre. Au départ, je voulais seulement que l'événement lié au bouton se produise, mais il a été déclenché par inadvertance. . Pour les événements sur ses deux parents, nous venons de faire ici un test simple. Imaginez si lors du développement du projet, un bouton et son parent étaient liés à des événements très importants en même temps, les résultats seraient désastreux. La solution à l’heure actuelle est d’éviter les événements bouillonnants.
Enregistrez l'événement de clic pour la saisie et empêchez son événement bouillonnant en même temps

document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);

Cet article explique les événements par défaut de blocage js et les exemples de bouillonnement d'événements de blocage js. Partage d'événements bouillonnants js, plus de contenu connexe s'il vous plaît. faites attention au site Web chinois php.

Recommandations associées :

Façons courantes d'écrire et d'appeler des fonctions js

L'ensemble du processus de lecture de json avec AJAX dans JS natif

installation et configuration de vue.js

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!