interface Web
js tutoriel
Un petit exemple explique comment empêcher les événements Jquery de bubbling_jquery
Un petit exemple explique comment empêcher les événements Jquery de bubbling_jquery
Qu'est-ce que l'événement JS bouillonne ?
Déclenchez un certain type d'événement sur un objet (comme un événement onclick). Si l'objet définit un gestionnaire pour cet événement, alors cet événement appellera ce gestionnaire si ce gestionnaire d'événement n'est pas défini ou si l'événement renvoie vrai. , alors cet événement se propagera à l'objet parent de cet objet, de l'intérieur vers l'extérieur, jusqu'à ce qu'il soit traité (tous les événements similaires de l'objet parent seront activés), ou qu'il atteigne le niveau supérieur de la hiérarchie des objets, c'est-à-dire l'objet document (Certains navigateurs sont des fenêtres).
Comment empêcher les événements Jquery de bouillonner ?
Expliquez avec un petit exemple
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Porschev---Jquery 事件冒泡</title>
<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divOne" onclick="alert('我是最外层');">
<div id="divTwo" onclick="alert('我是中间层！')">
<a id="hr_three" href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" mce_href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" onclick="alert('我是最里层！')">点击我</a>
</div>
</div>
</form>
</body>
</html>
Par exemple, la page ci-dessus,
Divisé en trois couches : divOne est la couche externe, divTwo est la couche intermédiaire et hr_two est la couche la plus interne
;
Ils ont tous leurs propres événements de clic, et la balise la plus interne a également des attributs href.
Exécutez la page, cliquez sur "Cliquez sur moi", et elle apparaîtra : Je suis la couche la plus interne ----> Je suis la couche intermédiaire ----> Je suis la couche la plus externe
---->Ensuite, créez un lien vers Baidu.
Il s'agit d'un bouillonnement d'événement. À l'origine, je cliquais uniquement sur l'étiquette portant l'ID hr_trois, mais trois opérations d'alerte ont été exécutées.
Processus de diffusion d'événements (représenté par l'ID de balise) : hr_trois----> divTwo----> Bouillonnant de la couche la plus interne à la couche la plus externe.
Comment l'arrêter ?
1.event.stopPropagation();
<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>Cliquez à nouveau sur "Cliquez sur moi", cela apparaîtra : je suis la couche la plus interne, puis créez un lien vers Baidu
2.return false;
Si le code suivant est ajouté à l'en-tête
<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
return false;
});
});
<script>
Cliquez à nouveau sur "Cliquez sur moi" et une pop-up apparaîtra : je suis la couche la plus interne, mais le lien vers la page Baidu ne sera pas exécuté
Cela se voit à partir de ceci :
1.event.stopPropagation();
Pendant le traitement des événements, le bouillonnement d'événements est empêché, mais le comportement par défaut n'est pas bloqué (il exécute le saut du lien hypertexte)
2.return false ;
Pendant le traitement des événements, la propagation des événements et le comportement par défaut sont empêchés (par exemple, il n'a pas exécuté le saut de lien hypertexte pour l'instant)
Il y en a un autre lié au bouillonnement :
3.event.preventDefault();
Si vous le mettez dans l'événement click de la balise d'en-tête A, cliquez sur "Cliquez sur moi".
Vous constaterez qu'il apparaît dans l'ordre : Je suis la couche la plus interne ----> Je suis la couche intermédiaire ----> Je suis la couche la plus externe, mais à la fin, elle ne saute pas à Baidu
Sa fonction est la suivante : lors du traitement des événements, il ne bloque pas le bouillonnement d'événements, mais bloque le comportement par défaut (il exécute uniquement toutes les boîtes pop-up, mais n'exécute pas les sauts d'hyperliens)
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 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.
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.
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
Pourquoi le mécanisme de bouillonnement d'événements se déclenche-t-il deux fois ?
Feb 25, 2024 am 09:24 AM
Pourquoi le bouillonnement d’événements se produit-il deux fois de suite ? La diffusion d'événements est un concept important dans le développement Web. Cela signifie que lorsqu'un événement est déclenché dans un élément HTML imbriqué, l'événement remonte de l'élément le plus interne vers l'élément le plus externe. Ce processus peut parfois prêter à confusion. Un problème courant est que la diffusion d'événements se produit deux fois de suite. Afin de mieux comprendre pourquoi le bouillonnement d'événements se produit deux fois de suite, regardons d'abord un exemple de code :
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
