Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

Geschrieben von Felix Lehmann

thumb

Felix arbeitet als Frontend-Entwickler und Web-Designer bei kulturbanause®. Sein Hauptaufgabenbereich umfasst die Erstellung von Layouts und Vektorgrafiken, Mikroanimationen und modularen Website-Komponenten. Sowohl beim Entwickeln eines Prototyps als auch bei der Umsetzung eines individuellen WordPress-Themes legt er großen Wert auf eine angepasste Darstellung über alle Geräteklassen und Bildschirme hinweg.

Feedback & Ergänzungen – 2 Kommentare

  1. 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
  2. Franz Meyer
    schrieb am 19.02.2017 um 11:38 Uhr:

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

    Antworten

Schreibe einen Kommentar zu Chris Valentin Antworten abbrechen

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 →