CSS pointer-events Eigenschaft

Die Eigenschaft pointer-events steuert, ob ein Element Ziel von Zeigerereignissen sein kann — Mausklicks, Hover, Touch- und Stifteingaben. Wenn sie auf none gesetzt ist, wird das Element für den Zeiger „transparent": Klicks, Hover und andere Interaktionen gehen direkt durch es hindurch zu dem, was darunter liegt.

Diese Seite erklärt die Werte der Eigenschaft, wo sie in HTML im Vergleich zu SVG tatsächlich funktioniert, die häufigen realen Anwendungsfälle und die Fallstricke, über die man stolpert.

Info

Ursprünglich für SVG definiert, ist pointer-events heute eine Standard-CSS-Eigenschaft.

Viele Werte gelten nur für SVG-Elemente. Für gewöhnliche HTML-Elemente werden nur auto und none weitgehend unterstützt — die SVG-spezifischen Werte (fill, stroke, visiblePainted usw.) haben keine Auswirkung auf HTML.

Wann man es verwenden würde

Klick-durch-Overlays. Ein dekoratives oder Lade-Overlay bedeckt die Seite, aber Klicks sollen den Inhalt dahinter erreichen. Setze pointer-events: none auf das Overlay.
Ein Steuerelement visuell deaktivieren. Kombiniere pointer-events: none mit reduzierter opacity, damit ein Button oder Link aussieht und sich verhält, als wäre er deaktiviert (Links haben kein natives disabled-Attribut, daher ist dies ein gängiges Muster).
Ereignisse durch bestimmte SVG-Formen hindurchfallen lassen. Eine über anderen gezeichnete Form kann nicht-interaktiv gemacht werden, damit die darunter liegenden Formen anklickbar bleiben.
Ein Kind innerhalb eines deaktivierten Elternelements wieder aktivieren. Setze none auf ein Wrapper-Element und auto auf ein Kind, damit nur dieses Kind interaktiv ist.

Wichtige Hinweise

Das Setzen von pointer-events: none auf ein Element verhindert, dass es Ziel von Zeigerereignissen wird, stoppt aber nicht das Auslösen von Ereignis-Listenern auf diesem Element. Wenn ein untergeordnetes Element pointer-events wieder aktiviert hat (auto), kann das Kind weiterhin als Ziel angesprochen werden. Ereignisse, die das Kind ansprechen, steigen dann durch das Elternelement auf und lösen alle daran angehängten Listener aus.

Warnung

pointer-events: none blockiert nur Zeigereingaben. Es entfernt das Element nicht aus der Tab-Reihenfolge, sodass Tastaturbenutzer einen „deaktivierten" Link oder Button weiterhin über die Tab-Taste erreichen können. Für echte Barrierefreiheit entfernt man das Element auch aus der Tab-Reihenfolge (tabindex="-1") oder verwendet das echte disabled-Attribut bei Formularsteuerelementen.

Anfangswert	auto
Gilt für	Alle Elemente.
Geerbt	Nein.
Animierbar	Nein.
Version	Scalable Vector Graphics (SVG) 1.1 (Second Edition).
DOM-Syntax	`object.style.pointerEvents = "auto";`

Syntax

CSS pointer-events-Syntax

pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | initial | inherit;

Beispiel der pointer-events-Eigenschaft:

CSS pointer-events Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        pointer-events: none;
      }
      div.example2 {
        pointer-events: auto;
      }
      div.example:hover,
      div.example2:hover {
        outline: 2px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>The Pointer-events Property</h2>
    <h3>Pointer-events: none</h3>
    <div class="example">
      Click here: <a href="https://www.w3docs.com/learn-javascript.html">JavaScript Tutorial</a>
    </div>
    <h3>Pointer-events: auto</h3>
    <div class="example2">
      Click here: <a href="https://www.w3docs.com/learn-css.html">CSS Tutorial</a>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Im obigen Beispiel bewegt man die Maus über jedes Feld. Das erste <div> (pointer-events: none) reagiert nicht — sein Link ist nicht anklickbar und beim Hover erscheint kein Rahmen. Das zweite <div> (pointer-events: auto) verhält sich normal.

Gängiges Muster: Ein deaktivierter Link

Da Anker kein disabled-Attribut haben, ist pointer-events: none die übliche Methode, um einen Link nicht anklickbar zu machen. Kombiniere es mit opacity, damit der Zustand sichtbar ist:

.btn-link.is-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}

Denke an den Barrierefreiheitshinweis oben: Der Link ist weiterhin per Tastatur erreichbar, sofern man nicht auch tabindex="-1" setzt.

Beispiel mit dem `<svg>`-Tag

In SVG kann pointer-events Klicks durch überlagerte Formen leiten. Im nächsten Beispiel verwendet der Pfad mit der Klasse .c pointer-events: none, sodass Klicks durch ihn hindurch zu den darunter liegenden Formen gelangen, während .d pointer-events: all verwendet, um Ereignisse auch dort abzufangen, wo seine Füllung transparent ist:

CSS pointer-events none-Wert Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        fill: #ccc;
      }
      .b {
        fill: #8ebf42;
      }
      .c {
        fill: #1c87c9;
        pointer-events: none;
      }
      .d {
        stroke: #666;
        fill: none;
        pointer-events: all;
      }
      .box:hover {
        stroke: #000;
        stroke-width: 5;
      }
    </style>
  </head>
  <body>
    <h2>Pointer-events property example</h2>
    <svg width="300" height="300">
      <g transform="translate(20, 20)">
        <path class="a box" d="M 0 0 L 100 0 L 100 100 L 0 100 z" />
        <path class="b box" d="M 50 50 l 100 0 l 0 100 l -100 0 z" />
        <path class="c box" d="M 100 100 l 100 0 l 0 100 l -100 0 z" />
        <path class="d box" d="M 150 150 l 100 0 l 0 100 l -100 0 z" />
      </g>
    </svg>
  </body>
</html>

Probier es selbst »

Werte

Wert	Beschreibung
none	Das Element reagiert nie auf Zeigerereignisse.
auto	Das Element akzeptiert Zeigerereignisse wie Klicks, Hover usw. Dies ist der Standardwert dieser Eigenschaft.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Nur SVG-Werte

Wert	Beschreibung
visiblePainted	Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn die visibility-Eigenschaft auf `visible` gesetzt ist, der Mauszeiger über dem Inneren oder dem Rand des Elements liegt und die fill- oder stroke-Eigenschaft auf einen anderen Wert als `none` gesetzt ist.
visibleFill	Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn die visibility-Eigenschaft auf `visible` gesetzt ist und der Mauszeiger über dem Inneren des Elements liegt.
visibleStroke	Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn die visibility-Eigenschaft auf `visible` gesetzt ist und der Mauszeiger über dem Rand des Elements liegt.
visible	Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn die visibility-Eigenschaft auf `visible` gesetzt ist und der Mauszeiger entweder über dem Inneren oder dem Rand des Elements liegt.
painted	Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn der Mauszeiger über dem Inneren oder dem Rand des Elements liegt und die fill- oder stroke-Eigenschaft auf einen anderen Wert als `none` gesetzt ist.
fill	Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn der Zeiger über dem Inneren des Elements liegt.
stroke	Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn der Zeiger über dem Rand des Elements liegt.
all	Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn der Zeiger über dem Inneren oder dem Rand des Elements liegt.

Übung

Was macht die 'pointer-events'-Eigenschaft in CSS?

Sie ermöglicht es einem Element, auf Mausklicks zu reagieren.Sie passt die Helligkeit eines Elements an.Sie legt fest, ob ein Element auf Mausereignisse reagiert oder nicht.Sie bietet eine 3D-Transformation für ein Element.Sie erlaubt es Elementen hinter dem Zielelement, Ereignisse abzufangen.