Bubbling-Verarbeitung von Mausereignissen mit JavaScript- und JQuery_javascript-Kenntnissen

Einfaches Mausbewegungsereignis:

Eintreten

Code kopieren Der Code lautet wie folgt:

Mauseingabe: kein Sprudeln
Mouseover: Blase

Das Mouseover-Ereignis wird immer dann ausgelöst, wenn der Mauszeiger über das ausgewählte Element oder seine Unterelemente läuft
Das Mouseenter-Ereignis wird nur ausgelöst, wenn der Mauszeiger über das ausgewählte Element

verläuft

Auszug

Code kopieren Der Code lautet wie folgt:

Mausblatt: kein Sprudeln
Mouseout: Sprudeln

Unabhängig davon, ob der Mauszeiger das ausgewählte Element oder ein untergeordnetes Element verlässt, wird das Mouseout-Ereignis ausgelöst
Das Mouseleave-Ereignis wird nur ausgelöst, wenn der Mauszeiger das ausgewählte Element verlässt

Beobachten wir das Problem anhand eines Falles:

Binden Sie das Mouseout-Ereignis an eine verschachtelte Ebene, und Sie werden feststellen, dass das Mouseout-Ereignis anders ist, als Sie es sich vorgestellt haben

Code kopieren Der Code lautet wie folgt:

Äußeres untergeordnetes Element

Untergeordnetes Element

0

0

Wir haben ein Problem mit dem Mouseout-Ereignis gefunden:

1. Blasenbildung kann nicht verhindert werden
2. Es wird auch bei internen untergeordneten Elementen

ausgelöst

Das gleiche Problem besteht auch beim Mouseover-Ereignis. Wie können wir also das Sprudeln stoppen, wenn die Methode stopPropagation fehlschlägt?

1. Um ein wiederholtes Auslösen von Mouseover und Mouseout zu verhindern, wird hier ein Attribut relatedTarget des Ereignisobjekts verwendet. Dieses Attribut wird verwendet, um die Attribute der zugehörigen Knoten der Zielknoten der Mouseover- und Mouseout-Ereignisse zu bestimmen. Vereinfacht ausgedrückt: Wenn das Mouseover-Ereignis ausgelöst wird, stellt das relatedTarget-Attribut den Knoten dar, den die Maus gerade verlassen hat. Wenn das Mouseout-Ereignis ausgelöst wird, stellt es das Objekt dar, zu dem sich die Maus bewegt. Da MSIE dieses Attribut nicht unterstützt, verfügt es über alternative Attribute, nämlich fromElement und toElement.
2. Mit diesem Attribut können wir klar erkennen, von welchem ​​Objekt sich unsere Maus bewegt und wohin sie sich bewegt. Auf diese Weise können wir feststellen, ob sich das zugehörige Objekt innerhalb des Objekts befindet, das das Ereignis auslösen soll, oder ob es sich um das Objekt selbst handelt. Durch dieses Urteil können wir vernünftigerweise entscheiden, ob wir das Ereignis wirklich auslösen wollen.
3. Hier verwenden wir auch eine Methode zur Überprüfung, ob ein Objekt in einem anderen Objekt enthalten ist, die Methode „contains“. MSIE und FireFox stellen jeweils Prüfmethoden bereit, und hier ist eine Funktion gekapselt.

Die Verarbeitung von jQuery ist genau die gleiche

Code kopieren Der Code lautet wie folgt:

jQuery.each({
        Mauseingabe: „mouseover“,
        Mouseleave: „mouseout“,
        pointerenter: „pointerover“,
        pointerleave: „pointerout“
    }, Funktion(orig, fix) {
        jQuery.event.special[orig] = {
            DelegateType: fix,
            bindType: fix,

            Handle: Funktion (Ereignis) {
                var ret,
                    Ziel = dies,
                    related = event.latedTarget,
                    handleObj = event.handleObj;

                // Für „mousenter/leave“ den Handler aufrufen, wenn der Bezug außerhalb des Ziels liegt.
                // NB: Kein relatedTarget, wenn die Maus das Browserfenster verließ/betrat
                if (!verwandte || (verwandte !== Ziel && !jQuery.contains(Ziel, verwandte))) {
                    event.type = handleObj.origType;
                    ret = handleObj.handler.apply(this, arguments);
                    event.type = fix;
                }
                return ret;
            }
        };
    });