Quels sont les moyens d’éviter que les événements ne dégénèrent ?

Les méthodes pour empêcher la propagation d'événements incluent la méthode "stopPropagation()", l'attribut "cancelBubble", l'instruction "return false", la méthode "stopImmediatePropagation()" et la méthode "preventDefault()" en conjonction avec le " méthode stopPropagation()". Les développeurs doivent choisir une méthode appropriée en fonction des besoins spécifiques et de la compatibilité du navigateur. Une utilisation appropriée des méthodes de prévention des bulles peut améliorer les effets d'interaction.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

La prévention des bulles d'événements est l'une des exigences courantes du développement Web. Elle peut empêcher la transmission d'événements aux éléments parents et à d'autres éléments ancêtres, et déclencher uniquement le gestionnaire d'événements de l'élément actuel. Dans le développement actuel, il existe de nombreuses façons d’empêcher les événements de se propager. Cet article détaillera cinq méthodes couramment utilisées pour empêcher la propagation d'événements.

1. Méthode stopPropagation()

La méthode stopPropagation() est la méthode la plus couramment utilisée et la plus simple pour empêcher les événements de bouillonner. Cette méthode peut empêcher l'événement de se propager en appelant la fonction stopPropagation() de l'objet événement. Un exemple est le suivant :

   elem.addEventListener('click', function(event){
      event.stopPropagation();
   });

Dans l'exemple ci-dessus, un gestionnaire d'événements de clic est lié à l'élément via la fonction addEventListener(), puis la méthode stopPropagation() est appelée dans la fonction de gestionnaire. Après avoir appelé cette méthode, l'événement ne sera plus transmis à l'élément parent et seul l'événement click de l'élément actuel sera déclenché.

2. Attribut CancelBubble

L'attribut CancelBubble est une méthode fournie par les premiers navigateurs IE pour empêcher la propagation d'événements et est toujours compatible avec la plupart des navigateurs modernes. Cette propriété sera définie sur true dans la fonction de gestion des événements pour empêcher l'événement de se propager. Un exemple est le suivant :

   elem.onclick = function(event){
      event.cancelBubble = true;
   };

Dans l'exemple ci-dessus, la diffusion bouillonnante des événements de clic est empêchée en définissant la propriété CancelBubble sur true.

3. return false déclaration

Dans certains cas, si vous souhaitez empêcher le comportement par défaut de l'événement et empêcher l'événement de bouillonner en même temps, vous pouvez utiliser la méthode de return false. Un exemple est le suivant :

   elem.onclick = function(event){
      // 阻止事件冒泡
      event.stopPropagation();
      // 阻止事件默认行为
      return false;
   };

Dans l'exemple ci-dessus, la propagation de l'événement et le comportement par défaut de l'événement sont empêchés en renvoyant false dans la fonction de gestionnaire d'événement. Il convient de noter que return false ne peut être utilisé que lors de la liaison directe de fonctions de traitement d'événements et ne peut pas être utilisé pour la liaison d'événements avec la fonction addEventListener().

4. Méthode stopImmediatePropagation()

La méthode stopImmediatePropagation() est très similaire à la méthode stopPropagation() et peut être utilisée pour empêcher les événements de se propager, mais elle a également une fonctionnalité supplémentaire : elle peut empêcher d'autres gestionnaires d'événements sur le même élément d'exécution. Un exemple est le suivant :

   elem.addEventListener('click', function(event){
      console.log('事件处理函数1');
      event.stopImmediatePropagation();
   });
   elem.addEventListener('click', function(event){
      console.log('事件处理函数2');
   });

Dans l'exemple ci-dessus, en appelant la méthode stopImmediatePropagation(), le gestionnaire d'événements 1 empêchera l'événement de bouillonner et les autres gestionnaires d'événements ne seront pas exécutés. Par conséquent, seule la « Fonction de gestion d'événement 1 » sera émise, mais la « Fonction de gestion d'événement 2 » ne sera pas émise.

5. La méthode PreventDefault() coopère avec la méthode stopPropagation()

Dans certains cas, nous voulons non seulement empêcher l'événement de bouillonner, mais également empêcher le comportement par défaut de l'événement (comme interdire les clics sur les liens pour sauter ou soumettre un formulaire, etc.). À ce stade, vous pouvez utiliser la méthode PreventDefault() et la méthode stopPropagation() en combinaison. Un exemple est le suivant :

   elem.addEventListener('click', function(event){
      event.preventDefault();
      event.stopPropagation();
   });

Dans l'exemple ci-dessus, en appelant la méthode PreventDefault(), vous pouvez empêcher le comportement par défaut de l'événement de clic, tel qu'un saut de lien ou la soumission d'un formulaire. L'appel simultané de la méthode stopPropagation() peut empêcher l'événement de se propager et garantir que seul le gestionnaire d'événements de l'élément actuel est déclenché.

Il convient de noter que bien que les méthodes ci-dessus puissent être utilisées pour empêcher les événements de se propager, en utilisation réelle, vous devez choisir avec soin quand les utiliser. Un abus excessif de la prévention du bouillonnement d'événements peut entraîner la non-transmission de l'événement à l'élément parent ou à d'autres fonctions de traitement, affectant ainsi l'expérience utilisateur. Par conséquent, les méthodes ci-dessus ne doivent être utilisées que dans les scénarios où il est réellement nécessaire d'empêcher la propagation d'événements, et la méthode applicable doit être sélectionnée raisonnablement en fonction des besoins.

En résumé, les méthodes pour empêcher la propagation d'événements incluent l'utilisation de la méthode stopPropagation(), l'attribut CancelBubble, le retour d'une fausse instruction, la méthode stopImmediatePropagation() et la méthode PreventDefault() en conjonction avec la méthode stopPropagation(). Chaque méthode a ses propres scénarios applicables, et les développeurs doivent choisir en fonction des besoins spécifiques et de la compatibilité du navigateur. Dans le même temps, l’utilisation raisonnable de méthodes visant à empêcher la propagation d’événements peut améliorer les effets d’interaction et l’expérience utilisateur.

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!