Introduction aux méthodes pour empêcher les événements bouillonnants dans jQuery

Introduction aux méthodes pour empêcher les événements bouillonnants dans jQuery_jquery

WBOY

Libérer： 2016-05-16 16:52:34

original

1381 Les gens l'ont consulté

1. Introduction aux événements bouillonnants

Lorsque nous cliquons sur un contrôle, si le contrôle parent incluant ce contrôle a également un événement de clic, l'exécution continuera.
Par exemple : un sous le div a un événement de clic. Lorsque l'on clique sur a, l'alerte apparaîtra deux fois. Ce phénomène est appelé événement bouillonnant.

Cet événement remonte de l'élément d'origine jusqu'au sommet de l'arborescence DOM.
Élément cible : l'élément cible de tout événement est le premier élément, qui est le bouton dans notre exemple,
et il apparaît comme un attribut dans notre objet élément. En utilisant un proxy d'événement, nous pouvons ajouter un gestionnaire d'événement à un élément,
attendre qu'un événement bouillonne à partir de ses éléments enfants, et nous pouvons facilement savoir à partir de quel élément l'événement a commencé.
Remarque :
le flou, la mise au point, le chargement et le déchargement ne peuvent pas faire de bulles comme les autres événements. En fait, le flou et la mise au point peuvent être obtenus en utilisant la capture d'événements plutôt que le bouillonnement d'événements (dans les navigateurs autres que IE).

2. Empêcher les événements jQuery de bouillonner

jQuery dispose d'une fonctionnalité de bouillonnement pour le déclenchement d'événements DOM. Parfois, profiter de cette fonctionnalité peut réduire la duplication de code, mais parfois nous ne voulons pas que les événements bouillonnent. À ce stade, il est nécessaire d'empêcher jQuery.Event de bouillonner.

Au début du document jQuery.Event, nous avons appris que l'objet jQuery.Event est un objet événement conforme à la norme W3C. En même temps, jQuery.Event élimine le besoin de vérifier la compatibilité avec IE.
jQuery.Event fournit un moyen très simple d'arrêter le bouillonnement d'événements : event.stopPropagation();

Copier le code Le code est la suivante :

$("p").click(function(event){
 event.stopPropagation();
 // faire quelque chose
})

Mais cette méthode n'a aucun effet sur les événements liés à l'aide de live. Une méthode plus simple est nécessaire pour empêcher l'événement de bouillonner : return false;

Copier le code Le code est le suivant :

$(this).after("Un autre paragraphe !");

retour faux; });

Compatible avec plusieurs fonctions de bouillonnement de terminaison de navigateur :

Copier le code Le code est le suivant :

 function stopDefault(e) {
 //Bloquer l'action par défaut du navigateur (W3C)
 if (e && e.preventDefault)
 La méthode d'action par défaut du navigateur
 else
 fenêtre .event.returnValue = false;
 return false;
 }

3. Utilisez l'attribut event.tatget pour clarifier l'objet événement

La variable event dans le gestionnaire d'événements contient l'objet événement. L'attribut event.tatget stocke l'élément cible où l'événement s'est produit. Cet attribut est spécifié dans l'API DOM, mais n'est pas implémenté par tous les navigateurs. jQuery apporte les extensions nécessaires à cet objet événement afin que cette propriété puisse être utilisée dans n'importe quel navigateur. Grâce à .target, vous pouvez déterminer l'élément du DOM qui a reçu l'événement en premier. De plus, nous savons que cela fait référence à l'élément DOM qui gère l'événement.

Utilisez l'attribut event.tatget pour clarifier l'objet événement

Le code pour empêcher le bouillonnement d'événement est le suivant :

Copiez le code Le code est le suivant :

$ (document).ready(function() {
 $('switcher').click(function(event){
 if(event.target == this)
 {
 $('switcher .button').toggleClass('hidden');
      }
     };)
});