CSS pointer-events

pointer-events legt fest, ob ein Element überhaupt Ziel von Maus- oder Touch-Interaktionen sein kann. Ist es deaktiviert, reagiert das Element nicht auf Klicks, Hover oder Touch – Ereignisse werden an das Element dahinter durchgereicht, als wäre das obere Element gar nicht da.

Typische Anwendungsfälle

Overlays, die Klicks zum darunterliegenden Inhalt durchreichen sollen
Dekorative Icons innerhalb klickbarer Elemente, die den Klick nicht abfangen dürfen
Das direkte Ziehen oder Speichern von Bildern über das Kontextmenü erschweren
Overlays, in denen einzelne Bedienelemente aktiv bleiben sollen
Tooltips/Badges, die nicht versehentlich Klicks blockieren

pointer-events-Werte

autoStandardverhalten – das Element reagiert normal auf Klicks, Hover und Touch.
noneKlicks, Hover- und Touch-Interaktionen werden für das Element deaktiviert. Stattdessen kann ein darunterliegendes Element reagieren.

Für SVG-Elemente gibt es zusätzliche, spezialisierte Werte – siehe weiter unten.

Durch ein Overlay klicken

Liegt ein Element mit pointer-events: none über einem anderen, landet der Klick beim darunterliegenden Element – als wäre die obere Ebene nicht vorhanden.

Link unter dem Overlay
Diese Karte bleibt klickbar.

.overlay {
    position: absolute;
    inset: 0;
    pointer-events: none; /* Die Karte darunter bleibt klickbar */
}

Elemente im Overlay aktivieren

pointer-events wird vererbt. Deshalb übernimmt auch der Button zunächst pointer-events: none vom Overlay. Mit pointer-events: auto wird er wieder bedienbar, während die restliche Fläche des Overlays weiterhin Klicks durchlässt.

Link unter dem Overlay
Die Karte bleibt ebenfalls klickbar.

Der Button im Overlay ist mit pointer-events: auto wieder aktiv.

.overlay {
    pointer-events: none;
}

.overlay button {
    pointer-events: auto;
}

Download von Bildern erschweren

Mit pointer-events: none lässt sich verhindern, dass ein Bild direkt mit Maus oder Touch angesprochen wird. Es kann dadurch nicht mehr angeklickt oder gezogen werden und im Kontextmenü erscheint die Option zum Speichern des Bildes nicht direkt.

Versuche, beide Bilder mit der Maus zu ziehen oder über das Kontextmenü zu speichern.

.bildschutz img {
    pointer-events: none;
    user-select: none;
}

Wichtig: Das schützt ein Bild nicht vor dem Download. Die Bilddatei kann weiterhin über den Quellcode oder die Entwicklerwerkzeuge gefunden und auch als Screenshot gespeichert werden. Das Muster erschwert lediglich den direkten Zugriff.

pointer-events und Cursor

Bei pointer-events: none wird auch der auf diesem Element definierte Cursor ignoriert. Der Browser zeigt stattdessen den Cursor des darunterliegenden Elements. Auch :hover und :active wirken auf dem übersprungenen Element nicht.

.overlay {
    pointer-events: none;
    cursor: not-allowed; /* bleibt wirkungslos */
}

Mehr zu den verschiedenen Cursor-Werten findest du in der Cursor-Lektion.

pointer-events und touch-action

pointer-events und touch-action regeln unterschiedliche Dinge: pointer-events entscheidet, welches Element Ziel einer Interaktion wird. touch-action bestimmt, welche Browsergesten wie Scrollen, Zoomen oder Wischen erlaubt sind, wenn die Interaktion auf diesem Element beginnt.

Bei pointer-events: none wird das Element übersprungen. Damit sind auch seine touch-action-Einstellungen für diese Interaktion nicht relevant – es gelten die Einstellungen des tatsächlich getroffenen Elements.

Werte für touch-action

autoStandardverhalten – der Browser darf Scroll- und Zoomgesten ausführen.
noneBrowsergesten wie Scrollen und Zoomen sind auf dem Element deaktiviert. Eigene Gesten können beispielsweise mit JavaScript umgesetzt werden.
pan-xHorizontales Scrollen ist erlaubt.
pan-yVertikales Scrollen ist erlaubt.
pan-left / pan-right Horizontales Scrollen in die angegebene Richtung ist erlaubt.
pan-up / pan-down Vertikales Scrollen in die angegebene Richtung ist erlaubt.
pinch-zoomZoomen mit zwei Fingern ist erlaubt.
manipulationErlaubt Scrollen und Pinch-Zoom, deaktiviert aber zusätzliche Gesten wie Doppeltipp-Zoom.

/* Horizontales Swipe-Karussell:
   eigene Geste, aber vertikal weiter scrollbar */
.swipe-karten {
    touch-action: pan-y;
}

:hover auf Touch-Geräten

Eine Bedienung per Touch kennt keinen echten Hover-Zustand. Nach einem Tap kann :hover trotzdem sichtbar bleiben, bis an eine andere Stelle getippt wird. Dieser Mobile-Bug wird manchmal fälschlich pointer-events zugeschrieben, hängt aber mit den Media Features hover und pointer zusammen.

Media Features für Eingabegeräte

hover: hoverDas primäre Eingabegerät unterstützt Hover.
hover: noneDas primäre Eingabegerät unterstützt kein Hover.
pointer: fineDas primäre Eingabegerät ermöglicht eine präzise Auswahl, beispielsweise eine Maus.
pointer: coarseDas primäre Eingabegerät ermöglicht nur eine ungenaue Auswahl, beispielsweise ein Finger.

/* Problematisch */
.karte:hover {
    transform: scale(1.05);
}

/* Hover nur mit geeignetem Eingabegerät */
@media (hover: hover) and (pointer: fine) {
    .karte:hover {
        transform: scale(1.05);
    }
}

Wichtig: Das sind Media Features, keine pointer-events-Werte – beide Konzepte heissen ähnlich, lösen aber unterschiedliche Probleme.

SVG-spezifische Werte

Bei SVG-Elementen hat auto dieselbe Wirkung wie visiblePainted. Zusätzliche Werte bestimmen, ob nur die Füllfläche, die Kontur, sichtbare Bereiche oder die gesamte Begrenzungsbox auf Zeiger-Interaktionen reagieren.

visiblePainted Reagiert auf Füllungen und Konturen, die sichtbar und nicht auf none gesetzt sind.
visibleFill Reagiert innerhalb der Füllfläche, wenn das Element sichtbar ist – unabhängig vom Wert von fill.
visibleStroke Reagiert im Bereich der Kontur, wenn das Element sichtbar ist – unabhängig vom Wert von stroke.
visible Reagiert innerhalb der Füllfläche und im Bereich der Kontur, wenn das Element sichtbar ist.
painted Reagiert auf Füllungen und Konturen, die nicht auf none gesetzt sind – unabhängig von visibility.
fill Reagiert innerhalb der Füllfläche – unabhängig von fill und visibility.
stroke Reagiert im Bereich der Kontur – unabhängig von stroke und visibility.
all Reagiert innerhalb der Füllfläche und im Bereich der Kontur – unabhängig von fill, stroke und visibility.
bounding-box Reagiert innerhalb der gesamten rechteckigen Begrenzungsbox des Elements. Dieser Wert wird noch nicht von allen Browsern zuverlässig unterstützt.

Bewege den Mauszeiger über den Stern.

/* Nur die sichtbare Füllfläche des Sterns reagiert */
.stern {
    fill: gold;
    pointer-events: visiblePainted;
}

.stern:hover {
    fill: mediumseagreen;
}

Cheat Sheet

pointer-events

auto Standardverhalten – das Element reagiert normal auf Zeiger-Interaktionen.
none Das Element wird bei Zeiger-Interaktionen übersprungen.
Vererbung Kind-Elemente können mit pointer-events: auto wieder aktiviert werden.
Cursor Bei pointer-events: none gelten Cursor und Hover-Zustände des darunterliegenden Elements.

touch-action

auto Standardverhalten – Scroll- und Zoomgesten sind erlaubt.
none Browsergesten wie Scrollen und Zoomen sind deaktiviert.
pan-x Horizontales Scrollen ist erlaubt.
pan-y Vertikales Scrollen ist erlaubt.
pan-left / pan-right Horizontales Scrollen in die angegebene Richtung ist erlaubt.
pan-up / pan-down Vertikales Scrollen in die angegebene Richtung ist erlaubt.
pinch-zoom Zoomen mit zwei Fingern ist erlaubt.
manipulation Scrollen und Pinch-Zoom sind erlaubt, zusätzliche Gesten wie Doppeltipp-Zoom nicht.

Media Features für Eingabegeräte

hover: hover Das primäre Eingabegerät unterstützt Hover.
hover: none Das primäre Eingabegerät unterstützt kein Hover.
pointer: fine Das primäre Eingabegerät ermöglicht eine präzise Auswahl.
pointer: coarse Das primäre Eingabegerät ermöglicht nur eine ungenaue Auswahl.

SVG-Werte

visiblePainted Sichtbare Füllungen und Konturen, die nicht auf none gesetzt sind.
visibleFill Sichtbare Füllfläche – unabhängig von fill.
visibleStroke Sichtbare Kontur – unabhängig von stroke.
visible Sichtbare Füllfläche und Kontur.
painted Füllungen und Konturen, die nicht auf none gesetzt sind – unabhängig von visibility.
fill Füllfläche – unabhängig von fill und visibility.
stroke Kontur – unabhängig von stroke und visibility.
all Füllfläche und Kontur – unabhängig von fill, stroke und visibility.
bounding-box Gesamte rechteckige Begrenzungsbox des SVG-Elements.

Kurz gesagt

pointer-events: none überspringt ein Element bei Maus-, Stift- und Touch-Interaktionen, sodass ein darunterliegendes Element reagieren kann.
pointer-events wird vererbt. Kind-Elemente können mit pointer-events: auto wieder aktiviert werden.
pointer-events: none verhindert keine Bedienung per Tastatur und ersetzt bei Formularelementen nicht das native disabled.
touch-action steuert Browsergesten; die Media Features hover und pointer beschreiben Eingabegeräte.
SVG bietet zusätzliche Werte, mit denen sich die interaktive Fläche einer Form bestimmen lässt.

Weiterführende Themen:
CSS-Cursor – Mauszeiger für interaktive Elemente
CSS-Outline – sichtbare Fokus-Markierungen und Tastaturbedienung