https://blog.kulturbanause.de/2017/02/css-pointer-events-click-tap-mouse-over-co-ignorieren/

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.

kulturbanause-Seminare in Berlin!

Unsere Termine im März/April:
CSS – The Next Level, WordPress, SVG, Prototyping, Responsive Design für Konzepter, HTML & CSS, Muse …

Jetzt Tickets sichern!

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:

  • none:
    Jegliche click-, scroll-  und hover-Events werden für das entsprechende Element abgeschaltet. Dazu gehören auch JavaScript gesteuerte click- oder tap-Events.
  • auto: 
    pointer-events: auto; stellt das Standardverhalten wieder her. Dies kann sehr hilfreich sein, um den Effekt von pointer-events:none; für verschachtelte Elemente wieder aufzuheben.

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

Für die wichtigsten Werte none und auto ist der Browser-Support generell gut. pointer-events: none; wird von allen aktuellen Browsern, mit Ausnahme von Opera Mini, unterstützt. Microsoft unterstützt die Eigenschaft ab dem IE11.

Das Abschalten von scroll-Events mit pointer-events: none; funktioniert allerdings nicht in Firefox. Für IE11 und Edge müssen links auf display: block; oder inline-block gesetzt werden, um click-Events zu verhindern.

Den genauen Browser-Support entnehmt ihr bitte der Website caniuse.com.