Detaillierte Erklärung zur Verwendung des CSS-Zeigerereignisse-Attributs

Bei der Frontend-Entwicklung stehen wir in direktem Kontakt mit den Benutzern und sollten unser Bestes tun, um den Benutzern eine reibungslose und angenehme Bedienung und ein natives Gefühl zu vermitteln. Die am häufigsten verwendete Methode ist die Animation.

Die Anforderung hier ist das Design der Popup-Ebene. Diese Popup-Ebene sollte wie die Popup-Ebene auf nativer Ebene aussehen, erscheinen, wenn auf die Schaltfläche geklickt wird, und sich schließen, wenn auf die Maske oder Schaltfläche geklickt wird, und beim Erscheinen und Schließen Animationseffekte (Ausblenden, Gleiten usw.) aufweisen.

Frage

Beim Schließen der Popup-Ebene verwende ich am Beispiel des FadeOut-Animationseffekts den Opazitätsprozess von 1 -> 0, um den Animationsprozess des allmählichen Verschwindens zu simulieren. Der Container ist der äußerste Container der Popup-Ebenenkomponente:

.container {
    Position: fest;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100%;
    Z-Index: 9999;
    Animation: 0,5 s Ausblende vorwärts;
}
@keyframes fadeOut {
    0% {
        Deckkraft: 1;
    }
    100 % {
        Deckkraft: 0;
    }
}

Das Problem besteht darin, dass eine Opazität von 0 nur die Elemente innerhalb des Containers transparent und unsichtbar macht, der Container aber weiterhin im DOM-Knoten vorhanden ist. Wenn wir das Schließereignis an die Maske der Popup-Ebene binden, wird das Klickereignis auf der Maske ausgelöst, da der Z-Index des Containers sehr groß ist.

Übergangsende- und Animationsendeereignisse

Um die oben genannten Probleme zu lösen und ein besseres Benutzererlebnis zu bieten, können wir den Containerknoten (Anzeige: keine) ausblenden, nachdem die Animationseffekte ausgeführt wurden, indem wir auf die Ereignisse „transitionend“ und „animationend“ achten. Auf diese Weise gibt es kein Problem mit der Maske, die Klickereignisse abfängt.

Einführung

Mithilfe der CSS-Technologie zum Generieren von Animationseffekten können wir die Endereignisse der Animation oder Transformation in JS erfassen: „transitionend“- und „animationend“-Ereignisse sind Standardbrowserereignisse. Das Transitionend-Ereignis wird ausgelöst, nachdem ein CSS-Übergang endet.

Das Ereignis „animationend“ wird ausgelöst, wenn eine CSS-Animation abgeschlossen ist (ausgenommen Situationen, in denen sie vor dem Abschluss beendet wird, z. B. wenn das Element unsichtbar wird oder die Animation aus dem Element entfernt wird).

Codebeispiel:

/*
 * Warten Sie auf das Transitionend-Ereignis im Containerelement. * Geben Sie dann eine Funktion an, z. B. showMessage()
 */
Funktion zeigeNachricht() {
    console.log('Übergang abgeschlossen');
}
var element = document.getElementById("container");
element.addEventListener("transitionend", showMessage, false);

Browserkompatibilität

Am Beispiel des Übergangsendereignisses ist das Animationsendereignis ähnlich.

Es ist ersichtlich, dass das WebKit-Präfix in WebKit-Browsern immer noch benötigt wird, sodass wir Ereignisse je nach Browser separat erkennen müssen.

Mangel

Meine Anforderung ist, dass diese Popup-Layer-Komponente häufig aufgerufen werden kann, d. h., nachdem der Benutzer den Popup-Layer geschlossen hat, wird er erneut geöffnet.

Bei dieser Lösung wird durch Abhören des Animations-Endereignisses zwischen display:none und display:block umgeschaltet. Dadurch erhöhen sich jedoch die Kosten für das Browser-Rendering (Neuzeichnen und Neufließen). Zudem muss die Browserkompatibilität berücksichtigt werden und Ereignisse müssen für verschiedene Browser separat erkannt werden.

CSS-Eigenschaft „pointer-events“

Gibt es eine elegantere und einfachere Lösung? Nun stellen wir unseren Protagonisten vor: Zeigerereignisse.

Es ist zu beachten, dass sich diese Zeigerereignisse von Zeigerereignissen (Ereignisse und zugehörige Schnittstellen zur Handhabung von Hardware-Zeigereingaben von Geräten (einschließlich Maus, Stift, Touchscreen usw.)) unterscheiden.

Einführung

Die Eigenschaft „pointer-events“ gibt an, unter welchen Umständen ein bestimmtes Grafikelement das Zielelement für ein Zeigerereignis sein kann. Sie beeinflusst die Umstände, unter denen Folgendes verarbeitet wird:

• Benutzeroberflächenereignisse wie Mausklicks
• dynamische Pseudoklassen (z. B. :hover, :active und :focus; [CSS2], Abschnitt 5.11)
• Hyperlinks

Kurz gesagt gibt die CSS-Eigenschaft „pointer-events“ an, unter welchen Umständen (falls überhaupt) ein bestimmtes grafisches Element zum Ziel eines Mausereignisses werden kann.

Spezifikation

Die Erweiterung auf HTML-Elemente war zwar in frühen Entwürfen des CSS Basic User Interface Module Level 3 vorhanden, wurde jedoch auf Level 4 vorangetrieben.

Es ist in erster Linie auf SVG ausgerichtet, wurde aber auf andere HTML-Elemente erweitert.

Grammatik

/*Schlüsselwortwerte*/
Zeigerereignisse: auto;
Zeigerereignisse: keine;
Zeigerereignisse: sichtbargemalt; /* nur SVG */
Zeigerereignisse: sichtbareFüllung; /* nur SVG */
Zeigerereignisse: sichtbarer Strich; /* nur SVG */
Zeigerereignisse: sichtbar; /* nur SVG */
Zeigerereignisse: gemalt; /* nur SVG */
Zeigerereignisse: füllen; /* nur SVG */
Zeigerereignisse: Strich; /* nur SVG */
Zeigerereignisse: alle; /* nur SVG */

Beispielsweise pointer-events: visibleFill;

Dies gilt nur für SVG. Ein Element wird nur dann zum Ziel eines Mausereignisses, wenn sein Sichtbarkeitsattribut sichtbar ist und sich der Mauszeiger innerhalb des Elements befindet. Das Füllattribut hat keinen Einfluss auf die Ereignisbehandlung.

Andere Attribute, die nur für SVG gelten, werden hier nicht beschrieben.

Hier interessieren uns eher die beiden Attributwerte [auto|none]. Auch bei der Verwendung auf anderen HTML-Elementen sind diese beiden Attributwerte interessant.

Wenn der Wert „auto“ ist. Dies verhält sich genauso, als ob das Attribut pointer-events nicht angegeben wäre. Für SVG-Inhalte hat dieser Wert dieselbe Auswirkung wie visiblePainted.

Wenn der Wert „none“ ist, ist das Element niemals das Ziel von Mausereignissen. Mit anderen Worten bedeutet der Wert „Keine“, dass das Mausereignis das Element „durchdringt“ und auf alles „unterhalb“ des Elements zielt.

Browserkompatibilität

Es ist ersichtlich, dass pointer-events mit den meisten mobilen Browsern kompatibel ist und keine Präfixanforderungen hat.

Zu beachtende Punkte

Wenn der Zeigerereigniswert „none“ ist, bedeutet das nicht unbedingt, dass der Ereignislistener des Elements niemals ausgelöst wird. Wenn für das untergeordnete Element ein explizites Zeigerereignisattribut festgelegt ist und angegeben wird, dass es das Ziel eines Mausereignisses sein kann, wird der Auslösevorgang durch Ereignisblasenbildung an das übergeordnete Element übertragen und das Ereignisüberwachungsereignis des übergeordneten Elements wird ausgelöst.

Zusammenfassen

Falls die Komponente der Popup-Ebene häufig aufgerufen werden kann, verwenden Sie die Zeigerereignislösung. Das heißt, wenn die Maske oder Schaltfläche beim Klicken geschlossen wird, legen Sie den Containeranimationseffekt und die Zeigerereignisse auf „none“ fest und wenn die Popup-Ebene angezeigt wird, legen Sie Zeigerereignisse auf „auto“ fest. Auf diese Weise kann das Problem durch eine einfache Änderung der CSS-Eigenschaften gelöst werden.

Das Obige ist eine Einführung in die Verwendung des CSS-Attributs „pointer-events“. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!