Traitement des événements de souris avec les compétences JavaScript et JQuery_javascript

Événement de mouvement simple de la souris :

Entrez

Copier le code Le code est le suivant :

mouseenter : pas de bulle
survol de la souris : bulle

L'événement mouseover sera déclenché chaque fois que le pointeur de la souris passe par l'élément sélectionné ou ses sous-éléments
L'événement mouseenter ne sera déclenché que lorsque le pointeur de la souris passera par l'élément sélectionné

Déménager

Copier le code Le code est le suivant :

mouseleave : pas de bulles
mouseout : bouillonnant

Peu importe que le pointeur de la souris quitte l'élément sélectionné ou tout élément enfant, l'événement mouseout sera déclenché
L'événement mouseleave ne sera déclenché que lorsque le pointeur de la souris quittera l'élément sélectionné

Observons le problème à travers un cas :

Liez l'événement mouseout à un niveau imbriqué et vous constaterez que l'événement mouseout est différent de ce que vous aviez imaginé

Copier le code Le code est le suivant :

Élément enfant externe

élément enfant

0

0

Nous avons trouvé un problème avec l'événement mouseout :

1. Impossible d'empêcher les bulles
2. Il sera également déclenché sur les éléments enfants internes

Le même problème existe également avec l'événement mouseover, alors comment arrêter de bouillonner lorsque la méthode stopPropagation échoue ?

1. Afin d'éviter le déclenchement répété du mouseover et du mouseout, un attribut RelatedTarget de l'objet événement est utilisé ici pour déterminer les attributs des nœuds associés des nœuds cibles des événements mouseover et mouseout. Pour faire simple, lorsque l'événement mouseover est déclenché, l'attribut RelatedTarget représente le nœud que la souris vient de quitter. Lorsque l'événement mouseout est déclenché, il représente l'objet vers lequel la souris se déplace. Étant donné que MSIE ne prend pas en charge cet attribut, il possède des attributs alternatifs, à savoir fromElement et toElement.
2. Avec cet attribut, nous pouvons clairement savoir de quel objet notre souris se déplace et où elle se déplace. De cette façon, nous pouvons déterminer si l'objet associé est à l'intérieur de l'objet dont nous voulons déclencher l'événement, ou s'il s'agit de l'objet lui-même. Grâce à ce jugement, nous pouvons raisonnablement choisir de déclencher ou non réellement l'événement.
3. Ici, nous utilisons également une méthode pour vérifier si un objet est contenu dans un autre objet, la méthode contain. MSIE et FireFox fournissent respectivement des méthodes de vérification, et une fonction est encapsulée ici.

Le traitement de jQuery est exactement le même

Copier le code Le code est le suivant :

jQuery.each({
        mouseenter : "survol de la souris",
        mouseleave : "mouseout",
        pointer: "pointeur",
        pointerleave : "pointerout"
    }, fonction (orig, correctif) {
        jQuery.event.special[orig] = {
            déléguéType : correctif,
            bindType : correctif,

            handle : fonction (événement) {
                var ret,
                    cible = ceci,
                    Related = événement. RelatedTarget,
                    handleObj = event.handleObj;

                // Pour entrer/sortir de la souris, appelez le gestionnaire si le lien se trouve en dehors de la cible.
                // NB : Pas de RelatedTarget si la souris est sortie/entrée dans la fenêtre du navigateur
                if (! Related || ( Related !== target && !jQuery.contains(target, Related))) {
                    event.type = handleObj.origType;
                    ret = handleObj.handler.apply(this, arguments);
                    event.type = correctif;
                >
                retour ret;
            >
        };
    });