1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
---
title: pointer-events
slug: Web/CSS/pointer-events
translation_of: Web/CSS/pointer-events
---
<div>{{CSSRef}}</div>
<h2 id="Zusammenfassung">Zusammenfassung</h2>
<p>Die CSS-Eigenschaft<strong> <code>pointer-events</code></strong> erlaubt es dem Autor zu steuern, unter welchen Umständen (wenn überhaupt) ein spezifisches grafisches Element <a href="/en-US/docs/Web/API/event.target">target</a> eines Mouse-Events wird. Wenn die Eigenschaft nicht gesetzt ist, werden die Eigenschaften von <code>visiblePainted</code> auf den SVG Inhalt angewandt.</p>
<p>Der Wert <code>none</code> ist nicht nur Indikator, dass das Element kein Ziel für Mouse-Events ist, sondern weist den Mouse-Event zusätzlich an, "durch" das Element zu gehen und stattdessen auf was auch immer auch "darunterliegend" ist, zu zielen.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: css">/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code>auto</code></dt>
<dd>Das Element verhält sich als ob die <code>pointer-events <font face="Open Sans, Arial, sans-serif">Eigenschaft nicht spezifiziert wurde. Im SVG-Inhalt hat dieser Wert und der Wert </font>visiblePainted</code> <code><font face="Open Sans, Arial, sans-serif">den selben Effekt.</font></code></dd>
<dt><code>none</code></dt>
<dd>Das Element ist nie das Ziel von Mouse-Events; trotzdem werden abstämmige Elemente angezielt, sofern Ihre <code>pointer-events </code>einen abweichenden Wert haben. In diesem Fall lösen Mouse-Events während Ihrem Weg zu/von den Nachkömmlingen während der Event-Capture/<a href="/en-US/docs/Web/API/event.bubbles">bubble</a>-Phasen gegebenenfalls die Event-Listener des übergeordneten Elements aus.</dd>
<dt><code>visiblePainted</code></dt>
<dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die <code>visibility</code> Eigenschaft auf <code>visible</code> gesetzt ist, sich der Mauszeiger im Inneren (z. B. 'fill') befindet und die <code>fill-</code>Eigenschaft einen anderen Wert als <code>none</code> hat oder wenn sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befindet und die <code>stroke-</code>Eigenschaft einen anderen Wert als <code>none </code>hat.</dd>
<dt><code>visibleFill</code></dt>
<dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die <code>visibility</code> Eigenschaft auf <code>visible</code> gesetzt ist und sich der Mauszeiger im Inneren (z. B. 'fill') befindet. Der Wert der <code>fill-</code>Eigenschaft beinflusst die Event-Verarbeitung nicht.</dd>
<dt><code>visibleStroke</code></dt>
<dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die <code>visibility</code> Eigenschaft auf <code>visible</code> gesetzt ist und sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befindet. Der Wert der <code>stroke-</code>Eigenschaft beinflusst die Event-Verarbeitung nicht.</dd>
<dt><code>visible</code></dt>
<dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die <code>visibility</code> Eigenschaft auf <code>visible</code> gesetzt ist und sich der Mauszeiger entweder im Inneren (z. B. 'fill') oder über einem Umgrenzung (z. B. 'stroke') des Elements befindet. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd>
<dt><code>painted</code></dt>
<dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger im Inneren (z. B. 'fill') des Elements befindet, und die <code>fill-</code>Eigenschaft einen anderen Wert als <code>none</code> hat, oder sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befindet, und die <code>stroke-</code>Eigenschaft einen anderen Wert als <code>none </code>hat. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd>
<dt><code>fill</code></dt>
<dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger im Inneren (z. B. 'fill') des Elements befindet. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd>
<dt><code>stroke</code></dt>
<dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befinden. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd>
<dt><code>all</code></dt>
<dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger entweder im Inneren (z. B. 'fill') oder über einem Umgrenzung (z. B. 'stroke') des Elements befinden. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd>
</dl>
<h3 id="Formale_Syntax">Formale Syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Beispiel_1">Beispiel 1</h3>
<pre class="brush:css">/* Beispiel 1: Unterbinden die Reaktion von `img` auf alle Mouse-Events wie z. B. dragging, hovering, clicking */
img {
pointer-events: none;
}</pre>
<h3 id="Example_2" name="Example_2">Beispiel 2</h3>
<p>Unterbinden eine Reaktion des Link-Tags mit der Eigenschaft href=http://example.com.</p>
<pre class="brush:html"><ul>
<li><a href="https://developer.mozilla.org">MDN</a></li>
<li><a href="http://example.com">example.com</a></li>
</ul></pre>
<pre class="brush:css">a[href="http://example.com"] {
pointer-events: none;
}</pre>
<div>{{EmbedLiveSample('Example_2', "500", "100")}}</div>
<h2 id="Anmerkungen">Anmerkungen</h2>
<p>Es gilt zu beachten: Durch <code>pointer-events</code> zu verhindern, dass ein Element Ziel eines Mouse-Events wird, bedeutet nicht, dass Mouse-Event-Listeners auf diesem Element nicht ausgelößt <em>werden</em> oder <em>werden können</em>. Wenn bei einem der Kinder des Elements <code>pointer-events</code> explizit gesetzt wurde, um <em>zu erlauben</em>, dass dieses Ziel eines Mouse-Events wird, werden alle auf das Kind gerichteten Events entlang der Elternkette durch das Elternelement wandern und wohlmöglich Events des Elternelements auslösen. Natürlich wird jede Mausinteraktion auf einem Punkt des Bildschirms, welcher vom Eltern- aber nicht vom Kindelement bedeckt ist, weder vom Kind noch vom Elternelement eingefangen (sie wird durch das Elternelement <em>hindurchgehen und </em>auf das zielen, was immer "darunterliegend" ist).</p>
<p>Wir würden gerne feingranularere Kontrolle (als lediglich <code>auto</code> und <code>none</code>) über die Teile eines Elements welche Mouse-Events "einfangen" und wann, im HTML bereitstellen. Um uns bei der Entscheidung zu helfen, welche <code>pointer-events</code> für HTML weiter ausgebaut werden sollten, oder wenn Sie irgend welche speziellen Wünsche haben, was Ihnen diese Eigenschaft ermöglichen sollte, dann fügen Sie diese bitte dem Use cases Abschnitt dieser <a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">Wiki Seite</a> hinzu (Machen Sie sich über die Ordentlichkeit keine Sorgen).</p>
<p>Diese Eigenschaft kann auch benutzt werden um bessere Bildraten beim Scrollen zu erzielen. Tatsächlich, während des Scrollens fährt die Maus über einige Elemente auf denen der <a href="/en-US/docs/Web/CSS/:hover">hover</a>-Effekt angewendet wird. Diese Effekte hingegen bleiben meist unbemerkt und resultieren trotzdem meist in hakeligen Scrollen. <code>pointer-events: none</code> auf den <code>body</code> anzuwenden deaktiviert Mouse-Events inkl. <code>hover</code> und wirkt sich positiv auf die Flüssigkeit des Scrollens. </p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikationen</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<p>Seine Erweiterung für HTML-Elemente, trotz Präsenz in frühen Entwürfen von CSS Basic User Interface Module Level 3, wurde auf sein <a class="external" href="http://wiki.csswg.org/spec/css4-ui#pointer-events">level 4</a> erhoben.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>SVG support</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.8")}}</td>
<td>11.0</td>
<td>9.0 (2.0)</td>
<td>3.0 (522)</td>
</tr>
<tr>
<td>HTML/XML content</td>
<td>2.0</td>
<td>{{CompatGeckoDesktop("1.9.2")}} [1]</td>
<td>11.0</td>
<td>15.0</td>
<td>4.0 (530)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Vor Firefox 41, standardmäßig deaktiviert. Seit Firefox 41, standardmäßig auf Desktop aktiviert, allerdings nur in Nightly builds.</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>Das SVG-Attribut {{SVGAttr("pointer-events")}}</li>
<li><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit Specs PointerEventsProperty</a> erweitert für den Gebrauch im (X)HTML Inhalt</li>
<li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">60fps scrolling using pointer-events: none</a></li>
</ul>
|
