Maison > interface Web > js tutoriel > 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

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

jacklove
Libérer: 2018-06-15 16:48:22
original
1656 Les gens l'ont consulté

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);
Copier après la connexion
Copier après la connexion

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>
Copier après la connexion
Copier après la connexion

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(&#39;c3&#39;).addEventListener(&#39;click&#39;,function(e){e.stopPropagation()},false);
Copier après la connexion

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);
Copier après la connexion
Copier après la connexion

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>
Copier après la connexion
Copier après la connexion

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(&#39;c3&#39;).addEventListener(&#39;click&#39;,function(e){e.stopPropagation()},false);
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal