CSS pointer-events – Click, Tap, Mouse-Over & Co. ignorieren

In komplexen Benutzeroberflächen kann es vorkommen, dass Elemente einander überlagern und die Interaktion mit verdeckten Schaltflächen erschwert wird. Mit der CSS-Eigenschaft pointer-events könnt ihr bewirken, dass Elemente vom Cursor ignoriert werden – ihr also durch ein Element hindurch klicken könnt.

Funktionsweise der CSS-Eigenschaft pointer-events

Mit Hilfe der CSS-Eigenschaft pointer-events könnt ihr steuern wie ein Element auf click- oder tap-Events reagiert. Die folgende Werte werden am häufigsten benötigt:

Neben diesen Werten existieren noch die Werte visiblePainted, visibleFill, visibleStroke, visibleStroke, painted, fill, stroke und all, die nur zur Steuerung von SVG benutzt werden.

Beispiel 1: Download von Bildern erschweren

Ihr könnt verhindern, dass Bilder via Drag and Drop oder Rechtsklick > speichern unter vom Benutzer kopiert werden können. Dazu gebt ihr Bildern einfach die CSS-Eigenschaft pointer-events: none;. Fertig. Über den Quellcode können die Bilder natürlich trotzdem heruntergeladen werden.

img {
  pointer-events: none; 
}

Beispiel 1 anschauen

Beispiel 2: Durch ein Overlay hindurch klicken

Ein Button wird von einem anderen Element gewollt oder ungewollt überlagert. Das folgende Beispiel zeigt, wie der Button trotzdem geklickt werden kann.

Das Beispiel zeigt zwei Buttons die jeweils von einem Overlay überlagert werden. Es ist nicht möglich den Button unter dem roten Overlay anzuklicken, da der Browser einen Klick auf das darüber liegende Overlay – und nicht auf den Button – registriert.

Der Button unter dem blauen Overlay wiederum ist problemlos zu erreichen, obwohl der Aufbau identisch ist. Hier haben wir auf das Overlay – in unserem Beispiel mit der CSS-Klasse .permeable – die Eigenschaft pointer-events: none; angewandt. Das Overlay wird vom Cursor ignoriert. Dadurch können hover- und click-Events auf den darunter liegenden Button registriert werden.

.permeable {
  pointer-events: none; 
}

Beispiel 2 anschauen

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the pointer-events feature across the major browsers from caniuse.com

Geschrieben von Felix Lehmann

Benutzerbild

Als Web-Designer und Frontend-Developer bei kulturbanause umfasst Felix Hauptaufgabenbereich die Konzeption, Gestaltung und Umsetzung von Designsystemen. Scribble auf Papier, Prototyping im Design-Tool, schnellstmöglich in den Browser und mit CSS umsetzen. Auch das Überführen in ein Custom WordPress-Theme ist kein Problem. Die meiste Zeit verbringt er trotzdem damit die richtigen Klassennamen zu finden.

Feedback & Ergänzungen – 3 Kommentare

  1. Axel
    schrieb am 11.07.2023 um 00:32 Uhr:

    Wenn pointer-events mit cursor verwendet werden soll, funktioniert cursor aber nicht, egal welche Werte eingegeben werden. Deaktiviert pointer-events den cursor?

    Antworten
  2. Chris Valentin
    schrieb am 29.07.2018 um 09:34 Uhr:

    Interessante Funktion – kannte ich bisher nicht und habe ich direkt ausprobiert. Funktioniert in meinem Testlauf in Safari auch wirklich super! Aber wenn ich meine CSS-Datei validiere (W3C Validierungsdienst) bekomme ich einen Fehler angezeigt:

    „Die Eigenschaft pointer-events existiert nicht: none“

    Mein CSS sieht so aus:
    .isDisabled {
    pointer-events: none;
    text-decoration: none;
    }

    Kann mir jemand erklären, wo der Fehler – scheinbar bei mir – liegt?

    Gruß & Dank

    Antworten
  3. Franz Meyer
    schrieb am 19.02.2017 um 11:38 Uhr:

    Ganz interessant, kann man sicherlich mal brauchen. Vielen Dank.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →