pointer-events
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die pointer-events
-CSS-Eigenschaft legt fest, unter welchen Umständen (falls überhaupt) ein bestimmtes grafisches Element das Ziel von Zeigerereignissen werden kann.
Probieren Sie es aus
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;
Die pointer-events
-Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus der folgenden Liste von Werten ausgewählt wird.
Werte
auto
-
Das Element verhält sich so, wie wenn die
pointer-events
-Eigenschaft nicht angegeben wäre. In SVG-Inhalten haben dieser Wert und der WertvisiblePainted
die gleiche Wirkung. none
-
Das Element selbst ist niemals das Ziel von Zeigerereignissen. Allerdings könnte sein Unterbaum durch die Einstellung von
pointer-events
auf einen anderen Wert weiterhin anvisierbar bleiben. In diesen Fällen werden Zeigerereignisse die Ereignis-Listener auf diesem übergeordneten Element gemäß auf ihrem Weg zu oder von dem Nachkommen während der Erfassung und Bubble-Phasen auslösen.Hinweis: Die Ereignisse
pointerenter
undpointerleave
werden ausgelöst, wenn ein Zeigegerät in ein Element oder eines seiner Nachkommen bewegt wird. Selbst wennpointer-events: none
auf das übergeordnete Element gesetzt ist und nicht auf die Kinder, werden die Ereignisse auf dem übergeordneten Element ausgelöst, nachdem der Zeiger in einen Nachkommen hinein- oder herausbewegt wurde.
Nur SVG (experimentell für HTML)
visiblePainted
-
Nur SVG (experimentell für HTML). Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn die
visibility
-Eigenschaft aufvisible
gesetzt ist und z.B. wenn ein Mauszeiger über dem Inneren (d.h. dem 'fill') des Elements ist und diefill
-Eigenschaft auf einen anderen Wert alsnone
gesetzt ist, oder wenn ein Mauszeiger über dem Umfang (d.h. dem 'stroke') des Elements ist und diestroke
-Eigenschaft auf einen anderen Wert alsnone
gesetzt ist. visibleFill
-
Nur SVG. Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn die
visibility
-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 das Ziel eines Zeigerereignisses sein, wenn die
visibility
-Eigenschaft aufvisible
gesetzt ist und z.B. wenn der Mauszeiger über dem Umfang (d.h. Stroke) des Elements ist. Der Wert derstroke
-Eigenschaft beeinflusst die Ereignisverarbeitung nicht. visible
-
Nur SVG (experimentell für HTML). Das Element kann das Ziel eines Zeigerereignisses sein, wenn die
visibility
-Eigenschaft aufvisible
gesetzt ist und z.B. der Mauszeiger entweder über dem Inneren (d.h. Fill) oder dem Umfang (d.h. Stroke) des Elements ist. Die Werte vonfill
undstroke
beeinflussen die Ereignisverarbeitung nicht. painted
-
Nur SVG (experimentell für HTML). Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn z.B. der Mauszeiger über dem Inneren (d.h. 'fill') des Elements ist und die
fill
-Eigenschaft auf einen anderen Wert alsnone
gesetzt ist, oder wenn der Mauszeiger über dem Umfang (d.h. 'stroke') des Elements ist und diestroke
-Eigenschaft auf einen anderen Wert alsnone
gesetzt ist. Der Wert dervisibility
-Eigenschaft beeinflusst die Ereignisverarbeitung nicht. fill
-
Nur SVG. Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn der Zeiger über dem Inneren (d.h. Fill) des Elements ist. Die Werte der
fill
- undvisibility
-Eigenschaften beeinflussen die Ereignisverarbeitung nicht. stroke
-
Nur SVG. Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn der Zeiger über dem Umfang (d.h. Stroke) des Elements ist. Die Werte der
stroke
- undvisibility
-Eigenschaften beeinflussen die Ereignisverarbeitung nicht. bounding-box
-
Nur SVG. Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn der Zeiger über der Begrenzungsbox des Elements ist.
all
-
Nur SVG (experimentell für HTML). Das Element kann nur dann das Ziel eines Zeigerereignisses sein, wenn der Zeiger über dem Inneren (d.h. Fill) oder dem Umfang (d.h. Stroke) des Elements ist. Die Werte der
fill
,stroke
undvisibility
-Eigenschaften beeinflussen die Ereignisverarbeitung nicht.
Beschreibung
Wenn diese Eigenschaft nicht festgelegt ist, gelten für SVG-Inhalte die gleichen Eigenschaften wie beim Wert visiblePainted
.
Zusätzlich zur Angabe, dass das Element nicht das Ziel von Zeigerereignissen ist, weist der Wert none
das Zeigerereignis an, "durch" das Element zu gehen und das, was sich "darunter" befindet, stattdessen zu targetieren.
Beachten Sie, dass das Verhindern, dass ein Element das Ziel von Zeigerereignissen wird, indem pointer-events
verwendet wird, nicht zwangsläufig bedeutet, dass Zeigerereignis-Listener auf diesem Element nicht oder nicht ausgelöst werden können. Wenn eines der Kinder des Elements pointer-events
explizit so eingestellt hat, dass das Kind das Ziel von Zeigerereignissen sein darf, dann werden alle Ereignisse, die auf dieses Kind abzielen, das Elternteil passieren, während das Ereignis die übergeordnete Kette durchläuft, und die Ereignis-Listener auf dem Elternteil entsprechend auslösen. Natürlich wird jegliche Zeigeraktivität an einem Punkt auf dem Bildschirm, der vom Elternteil, aber nicht vom Kind überdeckt wird, weder vom Kind noch vom Elternteil abgefangen (es wird "durch" das Elternteil hindurchgehen und das darunterliegende Ziel erfassen).
Elemente mit pointer-events: none
erhalten immer noch den Fokus durch sequentielle Tastaturnavigation mit der Tab-Taste.
Formale Definition
Anfangswert | auto |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Deaktivieren von Zeigerereignissen auf allen Bildern
Dieses Beispiel deaktiviert Zeigerereignisse (Klicken, Ziehen, Hovern usw.) auf allen Bildern.
img {
pointer-events: none;
}
Deaktivieren von Zeigerereignissen auf einem einzelnen Link
Dieses Beispiel deaktiviert Zeigerereignisse auf dem Link zu http://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
Specification |
---|
CSS Basic User Interface Module Level 4 # pointer-events-control |
Scalable Vector Graphics (SVG) 2 # PointerEventsProperty |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
pointer-events | ||||||||||||
Applies to HTML elements |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
user-select
- SVG-Attribut
pointer-events
- SVG-Attribut
visibility
PointerEvent