Table des matières
Contrôler avec précision Propagation des événements: annuler sélectivement l'écoute de l'événement pour des éléments spécifiques
Solution: utilisez intelligemment la délégation d'événements
Exemple de code
Analyse principale

Apr 04, 2025 pm 01:57 PM
élément HTML

Comment annuler sélectivement l'écoute d'événements pour un élément spécifique lors de la propagation des événements?

Contrôler avec précision Propagation des événements: annuler sélectivement l'écoute de l'événement pour des éléments spécifiques

Un contrôle précis de la propagation des événements est crucial lors de la gestion des événements d'éléments HTML, en particulier lorsque plusieurs écouteurs d'événements existent dans des éléments imbriqués. Cet article montrera comment éviter d'exécuter des auditeurs d'événements pour des éléments spécifiques (par exemple, des éléments qui ont des auditeurs intégrés non modifiés) tout en permettant aux auditeurs d'autres éléments de fonctionner correctement.

Supposons que nous ayons la structure HTML suivante:

<div id="a">
  <div id="b">
    <div id="c"></div>
  </div>
</div>
Copier après la connexion

Les éléments A, B et C sont tous liés à plusieurs fonctions d'écoute de l'événement de clic, où l'élément B contient des fonctions d'écoute intégrées qui ne peuvent pas être modifiées directement. Notre objectif est d'empêcher uniquement la fonction d'écoute intégrée de l'élément B et de laisser la fonction d'écoute des élément A et C continuer à s'exécuter.

Solution: utilisez intelligemment la délégation d'événements

Les délégués d'événements sont un mécanisme de traitement des événements efficace qui contrôle la propagation des événements des enfants en liant les auditeurs d'événements aux éléments parents.

Exemple de code

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de gestion des événements</title>
    <style>
        #A, #B, #C {
            padding: 20px;
            border: 1px solid black;
            margin: 10px;
        }
        #A { background-color: lightblue; }
        #B { background-color: lightgreen; }
        #C { background-color: lightcoral; }
    </style>


    <div id="A">
        UN
        <div id="B">
            B
            <div id="C">C</div>
        </div>
    </div>

    <script>
        // 将A和C元素的监听函数绑定到父元素A上
        document.getElementById('A').addEventListener('click', function(event) {
            if (event.target.id === 'A') {
                console.log('A 元素被点击');
            } else if (event.target.id === 'C') {
                console.log('C 元素被点击');
            }
        });

        // 为B元素添加自定义监听函数,阻止事件进一步传播
        document.getElementById('B').addEventListener('click', function(event) {
            event.stopImmediatePropagation(); // 阻止B元素内置监听函数执行
            console.log('B 元素自定义监听函数执行');
        });
    </script>

Copier après la connexion

Analyse principale

  1. Délégué de l'événement: En liant un auditeur d'événements sur l'élément parent A , la surveillance des événements des éléments enfants A et C est obtenue. event.target.id est utilisé pour identifier l'élément de déclenchement spécifique de l'événement.

  2. Blocage sélectif: dans B -Element, utilisez event.stopImmediatePropagation() . Cette méthode empêche les événements de se propager davantage sur l'élément B , empêchant ainsi l'exécution de la fonction d'écoute intégrée de l'élément B , mais permet à l'événement de continuer à bouillonner jusqu'à l'élément parent A , déclenchant ainsi l'auditeur de l'élément A

Grâce à cette méthode, nous pouvons contrôler avec précision la propagation des événements, gérer efficacement l'écoute des événements des éléments imbriqués et éviter les conflits inutiles.

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Exécuter la fonction PHP en utilisant onclick Exécuter la fonction PHP en utilisant onclick Feb 29, 2024 pm 04:31 PM

Nous aborderons également une autre façon d'exécuter une fonction PHP via l'événement onclick() en utilisant la bibliothèque Jquery. Cette méthode appelle une fonction javascript, qui affichera le contenu de la fonction php dans la page Web. Nous montrerons également une autre façon d'exécuter une fonction PHP en utilisant l'événement onclick(), en appelant la fonction PHP en utilisant du JavaScript pur. Cet article présentera un moyen d'exécuter une fonction PHP, d'utiliser la méthode GET pour envoyer les données dans l'URL et d'utiliser la fonction isset() pour vérifier les données GET. Cette méthode appelle une fonction PHP si les données sont définies et que la fonction est exécutée. Utiliser jQuery pour exécuter une fonction PHP via l'événement onclick() que nous pouvons utiliser

Comment lire des données Excel en HTML Comment lire des données Excel en HTML Mar 27, 2024 pm 05:11 PM

Comment lire des données Excel en HTML : 1. Utilisez la bibliothèque JavaScript pour lire les données Excel ; 2. Utilisez le langage de programmation côté serveur pour lire les données Excel.

La différence entre appendChild et append dans JS La différence entre appendChild et append dans JS Feb 20, 2024 pm 06:57 PM

La différence entre appendChild et append dans JS nécessite des exemples de code spécifiques. En JavaScript, lorsque nous devons ajouter dynamiquement des éléments enfants au DOM (Document Object Model), nous utilisons généralement les méthodes appendChild et append. Bien que leur objectif soit d'ajouter des éléments enfants aux éléments parents, il existe certaines différences dans leur utilisation. 1. Méthode appendChild La méthode appendChild est l'une des méthodes de l'objet nœud DOM.

Utilisez CSS Transform pour transformer des éléments Utilisez CSS Transform pour transformer des éléments Feb 24, 2024 am 10:09 AM

Utilisation de Transform en CSS La propriété Transform de CSS est un outil très puissant qui peut effectuer des opérations telles que la traduction, la rotation, la mise à l'échelle et l'inclinaison des éléments HTML. Cela peut changer radicalement l’apparence des éléments et rendre les pages Web plus créatives et dynamiques. Dans cet article, nous présenterons en détail les différentes utilisations de Transform et fournirons des exemples de code spécifiques. 1. Traduire (Traduire) Traduire fait référence au déplacement d'un élément sur une distance spécifiée le long de l'axe x et de l'axe y. Sa syntaxe est la suivante : tran

Qu'est-ce que le saut de ligne Dreamweaver ? Qu'est-ce que le saut de ligne Dreamweaver ? Apr 08, 2024 pm 09:54 PM

Utilisez la balise <br> dans Dreamweaver pour créer des sauts de ligne, qui peuvent être insérés via le menu, les touches de raccourci ou la saisie directe. Peut être combiné avec des styles CSS pour créer des lignes vides de hauteurs spécifiques. Dans certains cas, il est plus approprié d'utiliser la balise <p> au lieu de la balise <br> car elle crée automatiquement des lignes vides entre les paragraphes et applique un contrôle de style.

jQuery implémente une méthode simple pour déterminer s'il existe des éléments enfants dans un élément jQuery implémente une méthode simple pour déterminer s'il existe des éléments enfants dans un élément Feb 28, 2024 pm 03:21 PM

jQuery est une bibliothèque JavaScript largement utilisée qui fournit de nombreuses méthodes pratiques pour manipuler les éléments HTML. Lors du processus de développement de pages Web, nous rencontrons souvent des situations dans lesquelles nous devons déterminer s'il existe des sous-éléments au sein d'un élément. Dans cet article, nous présenterons comment utiliser jQuery pour réaliser cette fonction et fournirons des exemples de code spécifiques. Pour déterminer s'il y a des éléments enfants dans un élément, nous pouvons utiliser la méthode children() de jQuery. La méthode children() est utilisée pour obtenir des correspondances

Que signifie la crête en CSS Que signifie la crête en CSS Apr 28, 2024 pm 04:06 PM

Ridge est un style de bordure en CSS utilisé pour créer une bordure 3D avec un effet de relief, qui se manifeste par une ligne en forme de crête en relief.

Comment utiliser le survol en CSS Comment utiliser le survol en CSS Feb 23, 2024 pm 12:06 PM

La pseudo-classe hover en CSS est un sélecteur très couramment utilisé qui permet de changer le style d'un élément lorsque la souris le survole. Cet article présentera l'utilisation du survol et fournira des exemples de code spécifiques. 1. Utilisation de base Pour utiliser le survol, nous devons d'abord définir un style pour l'élément, puis utiliser la pseudo-classe :hover pour spécifier le style correspondant lorsque la souris survole. Par exemple, nous avons un élément bouton Lorsque la souris survole le bouton, nous voulons que la couleur d'arrière-plan du bouton passe au rouge et la couleur du texte au blanc.

See all articles