DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft pointer-events ermöglicht die Steuerung, wie HTML-Elemente auf Maus-/Touch-Ereignisse reagieren – einschließlich CSS-Hover-/Aktivzuständen, Klick-/Tippereignissen in Javascript und ob der Cursor sichtbar ist oder nicht.
.avoid-clicks {
pointer-events: none;
}Während die Eigenschaft pointer-events *elf* mögliche Werte hat, sind alle bis auf drei für die Verwendung mit SVG reserviert. Die drei gültigen Werte für jedes HTML-Element sind:
noneverhindert alle Klick-, Zustands- und Cursoroptionen auf dem angegebenen HTML-Element.autostellt die Standardfunktionalität wieder her (nützlich für Kindelemente eines Elements, bei dempointer-events: none;angegeben ist).inheritverwendet den Wertpointer-eventsdes Elternelements.
Wie oben gezeigt, ist der Haupteinsatzfall für pointer-events, dass Klick- oder Tippverhalten ein Element durchdringen und ein anderes Element darunter auf der Z-Achse erreichen kann. Dies wäre beispielsweise für grafische Overlays nützlich oder um Elemente mit opacity auszublenden (z.B. Tooltips) und trotzdem die Textauswahl auf dem darunter liegenden Inhalt zu ermöglichen.
Interessante Punkte
- „Die Verwendung von pointer-events in CSS für Nicht-SVG-Elemente ist experimentell. Das Feature war Teil des CSS3 UI Draft Specifications, wurde aber aufgrund vieler offener Fragen auf CSS4 verschoben.“ — Mozilla MDN
- „Wenn Sie einen Klick-Event-Listener zu einem Element hinzufügen und dann den pointer-events-Stil entfernen (oder seinen Wert auf auto ändern), wird der Klick-Event die vorgesehene Funktionalität auslösen. Grundsätzlich respektiert der Klick-Event den pointer-events-Wert.“ — David Walsh
Weitere Ressourcen
Browser-Unterstützung
Diese Browser-Support-Daten stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 3.6 | 11 | 12 | 4 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 2.1 | 3.2 |
Die Unterstützung ist in einigen Browsern tiefer, wenn sie auf <svg> angewendet wird, z. B. unterstützt IE 9 dies.
Das funktioniert hervorragend, um Hover-/Aktivzustände auf deaktivierten Buttons und Formularelementen zu deaktivieren.
aber Rechtsklick funktioniert immer noch
@deepak – „was ist ein Rechtsklick?“ – Mac-Benutzer seit 20 Jahren.
Rechtsklicken ist eine Mausaktion, aber kein Pointer-Event. Die HTML-API für das DOM definiert kein „onrightclick“-Ereignis und es gibt keinen nativen Listener für das Ereignis. Die nächstgelegene Übereinstimmung für die Behandlung von Rechtsklicks ist die neuere Kontextmenü-API für das Pop-up-Menü, aber dies ist kein direktes Ergebnis von Rechtsklicks, da jede Tastaturtaste oder jedes interaktive Gerät so eingestellt werden kann, dass das Kontextmenü geöffnet wird.
@Tony – frische dein JS-Wissen auf. Rechtsklick wird nativ über
onclickbehandelt, wobeievent.button == 2ist – siehe https://developer.mozilla.org/en-US/docs/Web/Reference/Events/click . Und brüste dich nicht damit, seit 20 Jahren Mac-Benutzer zu sein, das ist, als würdest du nach Sarkasmus fragen ;)Denken Sie daran, dass Sie Text in Eingabefeldern bereits bearbeiten können, indem Sie die Tab-Taste drücken und… einfach tippen =D.
Sie müssen Zustände auf Formularelementen deaktivieren und readonly="readonly" setzen…
Leider sind diese Tricks ineffektiv, wenn Sie „hover CSS“ innerhalb der SVG-Datei haben.
Ich habe die obige Demo in IE11 getestet und es funktioniert. Woohoo!
Es funktioniert, aber beachten Sie, dass für IE11 ein Ziel-Element, bei dem pointer-events auf
nonegesetzt wurden, damitpointer-events: autobeachtet wird, eine CSS-positionungleichstatichaben muss.Ref: https://coderwall.com/p/s8pjpg
@RK – Vielen Dank, werter Herr
Das einzige Problem, das ich damit bei Links habe, ist, dass der Titel eines Links beim Hovern nicht angezeigt wird.
Es gibt eine Diskrepanz zwischen pointer-events und oncontextmenu.
Hervorragend! Ich brauche wirklich mehr Zeit zum Experimentieren mit SVG, und dies scheint eine viel bessere Lösung zu sein als die Bewältigung von Event-Bubbles in JavaScript. Ich habe bemerkt, dass man Klick-Events auf den Container eines Kreises registriert, aber mit SVG ist der Kreis fast wie eine ClipMask (oder Mask in Flash). Ich habe versucht, eine ClipMask in SVG zu verwenden und den foreignObject in die ClipMask zu platzieren, nur um festzustellen, dass ClipMask kein foreignObject akzeptiert.
Hat jemand Ideen, wie man kreisförmige Objekte, die sich in einem Kreis drehen, innerhalb von SVG hinzufügt, wo alles hinter dem äußeren Rand des Kreises nicht als Ereignis vom SVG darüber registriert wird? Stellen Sie sich so etwas wie ein Wähltelefon mit einem Schalter an der Seite vor.
Dies wird sicherlich eine praktische Möglichkeit sein, Ereignisse durch Elemente „durchlassen“ zu lassen und vorübergehende Pseudozustände zu deaktivieren.
Aber ich kann mir kaum vorstellen, wofür es sonst noch nützlich sein könnte.
Wie implementiert man zum Beispiel Drag & Drop mit Pointer Events, ohne auch Skalierungs- und Zoom-Gesten zu blockieren? Es scheint nicht möglich zu sein.
Microsofts Vorschlag ist, „touch-action“ auf entweder „pan-x“ oder „pan-y“ zu setzen – z.B. wenn es auf „pan-y“ gesetzt ist, scrollt vertikales Swipen die Seite, während horizontales Swipen Ereignisse auslöst, die Sie für Drag & Drop verwenden können. Die Drag-Aktion würde also nur funktionieren, wenn Sie sie horizontal ausführen.
Das mag für Anwendungen akzeptabel sein, bei denen die Seiten skalierung deaktiviert ist, aber für Webseiten ist es nutzlos, bei denen die Skalierung groß genug sein kann, dass die Seite in beide Richtungen scrollt. Und ich halte es auch nicht für besonders intuitiv.
Pointer Events könnten eine nützliche High-Level-Abstraktion sein, aber sie sind kein Ersatz für ordnungsgemäße Low-Level-Touch-Events.
hmmm, nicht was ich erwartet habe… in diesem Beispiel scheint es keine Ereignisse an Elemente unter der Stapelreihenfolge oder z-index weiterzugeben, wie dieser Artikel nahelegt, also ist es nutzlos, wenn Sie eine vollständige Viewport-Überlagerung haben und mit Elementen darunter interagieren möchten. Lese ich das falsch?
http://codepen.io/pingram3541/pen/hvtFH (versuchen Sie, auf div.two „durch“ div.four zu klicken) es funktioniert nicht und es wird auch nicht der Hover-Zustand für den Anker angezeigt. Das Beispiel hat sowohl einen Erban-Anker als auch einen JS-Event-Handler.
Ich nehme den letzten Beitrag zurück, teilweise… ich kann nicht glauben, dass ich das getan habe, da ich IE fast nie benutze, außer um zu testen, was es kaputt macht… aber sicher genug, ich benutzte IE, als ich das Codepen erstellt habe, lol. Die CSS-Regel funktioniert unter Webkit. =)
lol, ich wünschte, ich könnte meine Kommentare bearbeiten, um diesen Thread nicht zu verunreinigen…
Eine Lösung für IE gefunden, aber sie ist nicht perfekt… da die WC3-Spezifikation für SVG ist, werden Pointer Events tatsächlich durchgelassen, wenn die Überlagerung als SVG definiert ist.
Und eine mögliche JS-Lösung – http://www.vinylfox.com/forwarding-mouse-events-through-layers/
Diese CSS-Zeile ist großartig – kann Links deaktivieren, ohne PHP anzufassen.
„pointer-events: none;“
Ich habe sie verwendet, um das Top-Level-Link-Menü in WP zu deaktivieren.
WENN es auch Untermenüs betrifft, dann setzen Sie „pointer-events: auto;“ auf die Untermenü-CSS.
Funktioniert großartig.
Es scheint, dass es bei festen Elementen nicht funktioniert…..
http://www.cybertechquestions.com/position-fixed-element-not-passing-through-pointer-event-click_87096.html
Tatsächlich funktioniert es bei festen Elementen. Ich habe eine feste Benutzerleiste mit einigen Symbolen darin (Links zu Login usw.). Als responsives Layout kollabiert das Menü zu einer festen Menüleiste (transparenter Hintergrund), die über der Benutzerleiste gestapelt ist. Die Symbole in der Benutzerleiste waren nicht mehr zugänglich. Durch die Verwendung von pointer-events:none auf der Menüleiste und pointer-events:auto auf den Menüelementen funktioniert alles wie erwartet, auch bei festen Elementen.
DAS HAT MIR GERADE DAS LEBEN GERETTET.
Ich habe eine Überlagerung über einer Galerie gemacht, auf der ich beim Hovern eine Lupe anzeigen würde. Das Problem ist, dass die Überlagerungsschicht Vorrang vor dem Anker hatte, und die Foundation Clearing-Galerie, die ich verwendete, beruht darauf, was angeklickt wird, um den Galerieinhalt zu identifizieren.
pointer-events:none auf dem Overlay-Div und alles war gelöst. :D
Ich hätte lieber separate Eigenschaften für „click-events“ und „hover-events“, damit ich sie getrennt steuern könnte. Immerhin ist ein „Pointer“ nicht einmal ein Event, lol. Ich schätze, Touch-Events könnten auch in Swipe-Events und Tap-Events aufgeteilt werden, aber dafür habe ich bisher keinen Anwendungsfall gefunden.
Ich unterstütze diesen Antrag ^_^
Sind Sie sicher, dass das unter Chrome für Android funktioniert?
OK, ich habe die Umgehung gefunden.
http://stackoverflow.com/questions/21474722/touchmove-pointer-events-none-css-doesnt-work-on-chrome-for-android-4-4-chro
Das ist großartig für reine CSS-Dropdown-Menüs! Dieser CSS-Pfeil nach unten hat mich gestört. Danke! http://codepen.io/kaela/pen/LAfEu
Ihre abschließende Anmerkung zu Inline-SVGs mit dieser Eigenschaft in IE9+ hat mir enorm viel Zeit gespart. Danke für Ihre Gründlichkeit!
Ich habe festgestellt, dass dies bei Pseudo-Elementen unter IE11 NICHT funktioniert. Ich habe das :after-Element über einem Select-Element positioniert und versucht, den Mausklick auf das Select-Element durchfallen zu lassen, aber es hat mit dem after-Element nicht funktioniert. Es funktioniert mit einem normalen Span, also habe ich es einfach benutzt, aber nur als Hinweis, wenn Sie dies bei einem Pseudo-Element verwenden möchten.
tester tester tester tester tester tester
Mausereignisse funktionieren möglicherweise nicht, aber Touch auf Mobilgeräten, z. B. iPhone iOS, funktioniert. Um Touch auf Mobilgeräten zu deaktivieren, können Sie verwenden.
Sind Sie sicher!! Funktioniert das für IE11 + Windows 7?
Denn ich habe versucht, es zum Laufen zu bringen, aber die Radio-Buttons waren immer noch aktiv.
Das ist eine interessante CSS-Eigenschaft, die ich noch nie zuvor gesehen habe. Ich habe einen Fehler behoben und bin darauf gestoßen. Das war übrigens das Problem, lol!
Ich habe über eine Stunde damit verbracht, herauszufinden, wie man ein Hover-Ereignis verhindert, bis ich auf diesen Artikel gestoßen bin.
Ich werde ständig von interessanten Designs herausgefordert und finde neue Wege, CSS zu verwenden.
pointer-events: none;
Ist jetzt ein weiteres Werkzeug in meinem Gürtel.
Vielen Dank.
Schön, ich habe pointer-events verwendet, um das Auslösen von Produktbild-Lightboxen beim Klicken auf WooCommerce-Produkte zu deaktivieren. Erledigt die Arbeit.
„none verhindert alle Klick-, Zustands- und Cursoroptionen auf dem angegebenen HTML-Element“ könnte vielleicht besser formuliert werden. Das
focus-Zustandsereignis wird beispielsweise beim Tabbing zum Element immer noch ausgelöst.Chris Coyier Vielen Dank!