Diepointer-eventsCSS Eigenschaft legt fest, unter welchen Umständen (wenn überhaupt) ein bestimmtes grafisches Element dasZiel von Zeigerereignissen werden kann.

Probieren Sie es aus

pointer-events: auto;

pointer-events: none;

pointer-events: stroke; /* SVG-only */

pointer-events: fill; /* SVG-only */

<section>  <div>    <p>      <a href="#">example link</a>    </p>    <p>      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">        <a xlink:href="#">          <circle            cx="50"            cy="50"            fill="#3E6E84"            r="40"            stroke="#ffb500"            stroke-width="5"></circle>          <text fill="white" text-anchor="middle" x="50" y="55">SVG</text>        </a>      </svg>    </p>  </div></section>

#example-element {  font-weight: bold;}#example-element a {  color: #009e5f;}#example-element svg {  width: 10em;  height: 10em;}

Syntax

/* Keyword values */pointer-events: auto;pointer-events: none;/* Values used in SVGs */pointer-events: visiblePainted;pointer-events: visibleFill;pointer-events: visibleStroke;pointer-events: visible;pointer-events: painted;pointer-events: fill;pointer-events: stroke;pointer-events: bounding-box;pointer-events: all;/* Global values */pointer-events: inherit;pointer-events: initial;pointer-events: revert;pointer-events: revert-layer;pointer-events: unset;

Diepointer-events Eigenschaft wird als einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.

Werte

auto

Das Element verhält sich so, als wäre diepointer-events Eigenschaft nicht angegeben. In SVG-Inhalten haben dieser Wert und der WertvisiblePainted die gleiche Wirkung.

none

Das Element selbst ist niemals dasZiel von Zeigerereignissen. Sein Unterbaum könnte jedoch anvisierbar bleiben, indempointer-events auf einen anderen Wert gesetzt wird. Unter diesen Umständen werden Zeigerereignisse beim Ereignis-Capture und in denBubble- Phasen entsprechende Ereignis-Listener an diesem Elternelement auslösen, auf dem Weg zu oder von den Nachkommen.

Hinweis:Diepointerenter undpointerleave Ereignisse werden ausgelöst, wenn ein Zeigegerät in ein Element oder einen seiner Nachkommen bewegt wird. Selbst wennpointer-events: none auf dem Elternteil gesetzt ist und nicht auf den Kindern, werden die Ereignisse auf dem Elternteil ausgelöst, nachdem der Zeiger in einen Nachkommen hinein- oder aus ihm herausbewegt wurde.

Nur SVG (experimentell für HTML)

visiblePainted

Nur SVG (experimentell für HTML). Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn dievisibility-Eigenschaft aufvisible gesetzt ist und z.B., wenn sich ein Mauszeiger über dem Inneren (d.h. 'fill') des Elements befindet und diefill-Eigenschaft auf einen Wert ungleichnone gesetzt ist, oder wenn sich ein Mauszeiger über dem Umriss (d.h. 'stroke') des Elements befindet und diestroke-Eigenschaft auf einen Wert ungleichnone gesetzt ist.

visibleFill

Nur SVG. Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn dievisibility-Eigenschaft aufvisible gesetzt ist und wenn z.B., ein Mauszeiger über dem Inneren (d.h. fill) des Elements ist. Der Wert derfill-Eigenschaft beeinflusst die Ereignisverarbeitung nicht.

visibleStroke

Nur SVG. Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn dievisibility-Eigenschaft aufvisible gesetzt ist und z.B., wenn der Mauszeiger über dem Umriss (d.h. stroke) des Elements ist. Der Wert derstroke-Eigenschaft beeinflusst die Ereignisverarbeitung nicht.

visible

Nur SVG (experimentell für HTML). Das Element kann Ziel eines Zeigerereignisses sein, wenn dievisibility-Eigenschaft aufvisible gesetzt ist und z.B., der Mauszeiger über entweder dem Inneren (d.h. fill) oder dem Umriss (d.h. stroke) des Elements ist. Die Werte derfill undstroke beeinflussen die Ereignisverarbeitung nicht.

painted

Nur SVG (experimentell für HTML). Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn z.B., der Mauszeiger über dem Inneren (d.h. 'fill') des Elements ist und diefill-Eigenschaft auf einen Wert ungleichnone gesetzt ist, oder wenn der Mauszeiger über dem Umriss (d.h. 'stroke') des Elements ist und diestroke-Eigenschaft auf einen Wert ungleichnone gesetzt ist. Der Wert dervisibility-Eigenschaft beeinflusst die Ereignisverarbeitung nicht.

fill

Nur SVG. Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn der Zeiger über dem Inneren (d.h. fill) des Elements ist. Die Werte derfill- undvisibility-Eigenschaften beeinflussen die Ereignisverarbeitung nicht.

stroke

Nur SVG. Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn der Zeiger über dem Umriss (d.h. stroke) des Elements ist. Die Werte derstroke- undvisibility-Eigenschaften beeinflussen die Ereignisverarbeitung nicht.

bounding-box

Nur SVG. Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn der Zeiger über derUmgrenzungsbox des Elements ist.

all

Nur SVG (experimentell für HTML). Das Element kann nur dann Ziel eines Zeigerereignisses sein, wenn der Zeiger über dem Inneren (d.h. fill) oder dem Umriss (d.h. stroke) des Elements ist. Die Werte derfill,stroke, undvisibility-Eigenschaften beeinflussen die Ereignisverarbeitung nicht.

Beschreibung

Wenn diese Eigenschaft nicht angegeben ist, gelten die gleichen Eigenschaften desvisiblePainted-Wertes für SVG-Inhalte.

Zusätzlich dazu, dass das Element nicht das Ziel von Zeigerereignissen ist, weist der Wertnone das Zeigerereignis an, "durch" das Element zu gehen und stattdessen das Ziel zu sein, das "unterhalb" dieses Elements liegt.

Beachten Sie, dass das Verhindern, dass ein Element das Ziel von Zeigerereignissen durch Verwendung vonpointer-events wird,nicht zwangsläufig bedeutet, dass Zeigerereignis-Listener an diesem Elementnicht odernicht ausgelöst werden können. Wenn eines der Kindelemente explizitpointer-events auf einen Wert gesetzt hat, der es erlaubt, dass dieses Kind das Ziel von Zeigerereignissen ist, dann werden alle Ereignisse, die dieses Kind anvisieren, während das Ereignis die Elternkette entlangläuft, an den Elternteil weitergereicht und geeignete Ereignis-Listener am Elternteil auslösen. Natürlich wird jede Zeigeraktivität an einem Punkt auf dem Bildschirm, der vom Elternteil, aber nicht vom Kind abgedeckt wird, weder vom Kind noch vom Elternteil erfasst (sie wird "durch" den Elternteil gehen und das Ziel sein, das darunter liegt).

Elemente mitpointer-events: none erhalten weiterhin Fokus durch sequentielle Tastaturnavigation mit derTab-Taste.

Formale Definition

Formale Syntax

pointer-events =
auto|
bounding-box|
visiblePainted|
visibleFill|
visibleStroke|
visible|
painted|
fill|
stroke|
all|
none

Beispiele

Deaktivieren von Zeigerereignissen auf allen Bildern

Dieses Beispiel deaktiviert Zeigerereignisse (Klicken, Ziehen, Überfahren usw.) auf allen Bildern.

img {  pointer-events: none;}

Deaktivieren von Zeigerereignissen auf einem einzelnen Link

Dieses Beispiel deaktiviert Zeigerereignisse auf dem Link zuhttp://example.com.

HTML

<ul>  <li><a href="https://developer.mozilla.org">MDN</a></li>  <li><a href="http://example.com">example.com</a></li></ul>

CSS

a[href="http://example.com"] {  pointer-events: none;}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• user-select
• SVGpointer-events Attribut
• SVGvisibility Attribut
• PointerEvent