Zeigerereignisse - CSS-Tricks | CSS-Almanach 2025

Mit dieser pointer-eventsEigenschaft können Sie steuern, wie HTML-Elemente auf Maus- / Berührungsereignisse reagieren - einschließlich CSS-Hover- / Aktivstatus, Klick- / Tippereignisse in Javascript und ob der Cursor sichtbar ist oder nicht.

.avoid-clicks ( pointer-events: none; )

Während die pointer-eventsEigenschaft elf mögliche Werte annimmt, sind alle bis auf drei für die Verwendung mit SVG reserviert. Die drei gültigen Werte für jedes HTMl-Element sind:

none Verhindert alle Klick-, Status- und Cursoroptionen für das angegebene HTML-Element
autostellt die Standardfunktionalität wieder her (nützlich für die Verwendung für untergeordnete Elemente eines Elements mit pointer-events: none;angegeben
inheritverwendet den pointer-eventsWert des übergeordneten Elements des Elements

Schauen Sie sich diesen Stift an!

Wie oben gezeigt, besteht der Hauptanwendungsfall pointer-eventsdarin, das Klicken oder Tippen zuzulassen, um ein Element zu einem anderen Element darunter auf der Z-Achse zu „durchlaufen“. Dies wäre beispielsweise nützlich für grafische Überlagerungen oder zum Ausblenden von Elementen mit opacity(z. B. QuickInfos) und zum Ermöglichen der Textauswahl für den darunter liegenden Inhalt.

Sehenswürdigkeiten

„Die Verwendung von Zeigerereignissen in CSS für Nicht-SVG-Elemente ist experimentell. Die Funktion war früher Teil des Entwurfs der CSS3-Benutzeroberfläche, wurde jedoch aufgrund vieler offener Probleme auf CSS4 verschoben. “ - Mozilla MDN
"Wenn Sie einem Element einen Listener für Klickereignisse hinzufügen, entfernen Sie den Zeigerereignisstil (oder ändern Sie seinen Wert in" Auto ". Das Klickereignis löst die angegebene Funktionalität aus. Grundsätzlich berücksichtigt das Klickereignis den Wert für Zeigerereignisse." - David Walsh

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.