CSS pointer-events-Eigenschaft

Die pointer-events-Eigenschaft definiert, ob ein Element auf Pointer-Events reagiert oder nicht.

INFO

Ursprünglich für SVG definiert, ist pointer-events nun eine standardmäßige CSS-Eigenschaft.

Viele Werte sind auf SVG-Elemente anwendbar, aber nur auto und none werden für HTML-Elemente weitgehend unterstützt.

Wichtige Hinweise

Wenn Sie pointer-events: none auf ein Element anwenden, wird verhindert, dass es zum Ziel von Pointer-Events wird, dies stoppt jedoch nicht das Auslösen von Event-Listenern auf diesem Element. Wenn ein untergeordnetes Element pointer-events aktiviert hat, kann es weiterhin angesprochen werden. Folglich werden Events, die das untergeordnete Element treffen, durch das übergeordnete Element nach oben bubbeln und alle daran angehängten Listener auslösen.

Anfangswert	auto
Anwendbar auf	Alle Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	Scalable Vector Graphics (SVG) 1.1 (Second Edition).
DOM-Syntax	`object.style.pointerEvents = "auto";`

Syntax

CSS pointer-events-Syntax

css

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

Beispiel für die pointer-events-Eigenschaft:

CSS pointer-events-Codebeispiel

html

<!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>

Try it Yourself »

Ergebnis

CSS pointer-events none value

Fahren Sie im gegebenen Beispiel über die Elemente, um zu sehen, welches auf die pointer-events reagiert.

Dieses Beispiel zeigt, wie Pointer-Events durch Elemente hindurchgereicht oder von darunterliegenden Elementen aufgefangen werden können. Die überlappenden Pfade veranschaulichen dieses Verhalten: Der Pfad mit der Klasse .c hat pointer-events: none, sodass Klicks hindurchgehen und die Formen darunter treffen. Der Pfad mit der Klasse .d verwendet pointer-events: all, um sicherzustellen, dass er Events auffängt, auch wenn er visuell andere Elemente überlappt:

Beispiel für pointer-events mit dem `<svg>`-Tag:

CSS pointer-events none-Wert-Beispiel

html

<!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>

Try it Yourself »

Werte

Wert	Beschreibung
none	Das Element reagiert niemals auf Pointer-Events.
auto	Das Element akzeptiert Pointer-Events wie Klicks, Hover usw. Dies ist der Standardwert dieser Eigenschaft.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Nur für SVG gültige Werte

Wert	Beschreibung
visiblePainted	Das Element kann nur Ziel eines Pointer-Events sein, wenn die visibility-Eigenschaft auf `visible` gesetzt ist, der Mauszeiger sich über dem Inneren oder Umfang des Elements befindet und die fill- oder stroke-Eigenschaft auf einen Wert ungleich `none` gesetzt ist.
visibleFill	Das Element kann nur Ziel eines Pointer-Events sein, wenn die visibility-Eigenschaft auf `visible` gesetzt ist und der Mauszeiger sich über dem Inneren des Elements befindet.
visibleStroke	Das Element kann nur Ziel eines Pointer-Events sein, wenn die visibility-Eigenschaft auf `visible` gesetzt ist und der Mauszeiger sich über dem Umfang des Elements befindet.
visible	Das Element kann nur Ziel eines Pointer-Events sein, wenn die visibility-Eigenschaft auf `visible` gesetzt ist und der Mauszeiger sich entweder über dem Inneren oder dem Umfang des Elements befindet.
painted	Das Element kann nur Ziel eines Pointer-Events sein, wenn der Mauszeiger sich über dem Inneren oder Umfang des Elements befindet und die fill- oder stroke-Eigenschaft auf einen Wert ungleich `none` gesetzt ist.
fill	Das Element kann nur Ziel eines Pointer-Events sein, wenn sich der Zeiger über dem Inneren des Elements befindet.
stroke	Das Element kann nur Ziel eines Pointer-Events sein, wenn sich der Zeiger über dem Umfang des Elements befindet.
all	Das Element kann nur Ziel eines Pointer-Events sein, wenn sich der Zeiger über dem Inneren oder dem Umfang des Elements befindet.

Praxis

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 definiert, ob ein Element auf Mausereignisse reagiert.Sie bietet 3D-Transformationen für ein Element.Sie ermöglicht es Elementen hinter dem Ziel-Element, Events aufzufangen.

CSS pointer-events-Eigenschaft ​

Wichtige Hinweise ​

Syntax ​

Beispiel für die pointer-events-Eigenschaft: ​

Ergebnis ​

Beispiel für pointer-events mit dem <svg>-Tag: ​

Werte ​

Nur für SVG gültige Werte ​

Praxis ​