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
|
---
title: pointer-events
slug: Web/CSS/pointer-events
translation_of: Web/CSS/pointer-events
---
<div>{{CSSRef}}</div>
<h2 id="Resumo">Resumo</h2>
<p>A propriedade CSS <code>pointer-events </code>permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o <a href="/en-US/docs/Web/API/event.target">alvo</a> do evento do mouse. Quando essa propriedade não é especificada, as mesmas características do valor <code>visiblePainted </code>é aplicada no conteúdo SVG.<code> </code></p>
<p>Além de indicar que este elemento não é o alvo do evento do mouse, o valor <code>none</code> instrui o evento do mouse a "passar" o elemento e tudo que está "abaixo" deste elemento.</p>
<p>{{cssinfo}}</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="brush: css">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;
pointer-events: inherit;
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>auto</code></dt>
<dd>O elemento se comporta como se a propriedade <code>pointer-events</code> não fosse especificada. Em conteúdo SVG, esse valor e o valor <code>visiblePainted </code>tem o mesmo efeito.</dd>
<dt><code>none</code></dt>
<dd>O elemento nunca é o <a href="/en-US/docs/Web/API/event.target">alvo</a> de eventos do mouse; contudo, o evento do mouse pode direcionar seus elementos descendentes se esses descendentes tiverem algum outro valor configurado no <code>pointer-events.</code> Nessas circunstâncias, os eventos do mouse vão acionar eventos de escuta em seus elementos pai conforme apropriado no seu caminho de/para o descendente, durante as fases do evento captura/<a href="/en-US/docs/Web/API/event.bubbles">borbulha.</a></dd>
<dt><code>visiblePainted</code></dt>
<dd>Apenas SVG. O elemento pode apenas ser alvo de um evento de mouse quando a propriedade <code>visibility</code> é definida como <code>visible</code> e quando o cursor do mouse estiver sobre o interior (exemplo: “preenchimento”) do elemento e a propriedade <code>fill</code> tiver um valor exceto <code>none</code>, ou quando o cursor do mouse estiver sobre o perímetro(exemplo: “linha”) do elemento e a propriedade <code>stroke</code> estiver definida com um valor exceto <code>none</code>.</dd>
<dt><code>visibleFill</code></dt>
<dd>Apenas SVG. O elemento apenas pode ser o alvo de um evento mouse quando a propriedade <code>visibility</code> é definida como <code>visible</code> e quando o cursor do mouse estiver sobre o interior (exemplo: “preenchimento”) do elemento. O valor da propriedade <code>fill</code> não afeta o processamento dos eventos.</dd>
<dt><code>visibleStroke</code></dt>
<dd>Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando a propriedade <code>visibility</code> é definida como <code>visible</code> e quando o cursor do mouse estiver sobre o perímetro (exemplo: "linha") do elemento. O valor da propriedade <code>stroke</code> não afeta o processamento do evento.</dd>
<dt><code>visible</code></dt>
<dd>Apenas SVG. O elemento pode ser o alvo de um evento de mouse quando a propriedade <code>visibility</code> é definida como <code>visible</code> e o cursor do mouse estiver sobre ou no interior (exemplo: preenchimento) ou perímetro (exemplo: linha) do elemento. O valor do <code>fill</code> e <code>stroke</code> não afeta o processamento do evento.</dd>
<dt><code>painted</code></dt>
<dd>Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando o cursor do mouse estiver sobre o interior (exemplo: “preenchimento”) do elemento e a propriedade <code>fill</code> definida com valor diferente de <code>none</code>, ou quando o cursor do mouse estiver no perímetro(exemplo: “linha”) do elemento e a propriedade <code>stroke</code> definida com valor diferente de <code>none</code>. O valor da propriedade <code>visibility</code> não afeta o processamento do evento.</dd>
<dt><code>fill</code></dt>
<dd>Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando o ponteiro estiver sobre o interior (exemplo: preenchimento) do elemento. Os valores das propriedades <code>fill </code>e <code>visibility</code> não afetam o processamento do evento.</dd>
<dt><code>stroke</code></dt>
<dd>Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando o ponteiro estiver sobre o perímetro (exemplo: linha) do elemento. Os valores das propriedades <code>stroke</code> e <code>visibility</code> não afetam o processamento do evento.</dd>
<dt><code>all</code></dt>
<dd>Apenas SVG. O elemento apenas pode ser alvo do evento do mouse quando o ponteiro estiver sobre o interior (exemplo: preenchimento) ou perímetro (exemplo: linha) do elemento. Os valores das propriedades <code>fill</code>, <code>stroke</code> e <code>visibility</code> não afetam o processamento do evento.</dd>
</dl>
<h3 id="Sintaxe_formal">Sintaxe formal</h3>
<pre class="syntaxbox">{{csssyntax("pointer-events")}}</pre>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Exemplo_1">Exemplo 1</h3>
<pre class="brush:css">/* Exemplo 1: Fazer todas img não reagir a qualquer evento de mouse tal como arrastar, passar sobre, clique etc */
img {
pointer-events: none;
}</pre>
<h3 id="Example_2" name="Example_2">Exemplo 2</h3>
<p>Makes the link to http://example.com non-reactive.</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="Notas">Notas</h2>
<p>Note que previnir um elemento de ser o alvo de eventos de mouse usando <code>pointer-events </code>não necessariamente quer dizer que o evento ouvinte do mouse desde elemento <em>não pode </em>ou <em>não vai se</em> desencadeado. Se um dos elementos filhos tem <code>pointer-events</code> explicitamente definidos para <em>permitir</em> que o filho seja o alvo do evento do mouse, então qualquer evento direcionado para este filho vai passar através do pai como o evento se deslocando ao longo da cadeia pai, e os ouvintes do evento gatilho do pai conforme o caso. Claro que qualquer atividade do mouse em um ponto da tela que é coberto pelo pai, mas não pelo filho, não será capturado por qualquer filho ou pai (isso vai “através” do pai e qualquer alvo que está abaixo).</p>
<p>Nós gostaríamos de fornecer um controle de textura mais refinado (do que apenas <code>auto</code> e <code>none</code>) em HTML para que partes de um elemento fizessem com que os eventos mouse “capturem” , e quando. Para nos ajudar a decidir como <code>pointer-events </code>devem ser estendido para HTML, se você tem qualquer coisa particular que você gostaria de fazer com essa propriedade, então por favor adicione na seção Caso de Uso <a href="https://wiki.mozilla.org/SVG:pointer-events">dessa wiki page</a> (não se preocupe sobre ficar organizado ).</p>
<p>Esta propriedade pode também ser usada para alcançar melhores taxas de quadros durante a rolagem. De fato, enquanto rola a página, o mouse passa sobre alguns elementos, então efeitos <a href="/en-US/docs/Web/CSS/:hover">hover</a> se aplicam. Contudo, esses efeitos são muitas vezes despercebidas pelo usuário e principalmente resultam em uma rolagem ruim. Aplicar <code>pointer-events:</code> <code>none</code> no <code>body</code> desabilita eventos de mouse incluindo hover que resultam em uma performance melhor de rolagem.</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Status</th>
<th scope="col">Comentário</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>Se extende para elementos HTML, embora presente nos primeiros rascunhos do Módulo Básico de Interface do Usuário do CSS nivel 3, foi empurrado para o <a href="http://wiki.csswg.org/spec/css4-ui#pointer-events">nível 4</a>.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</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>Suporte SVG</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.8")}}</td>
<td>9.0</td>
<td>9.0 (2.0)</td>
<td>3.0 (522)</td>
</tr>
<tr>
<td>Conteúdo HTML/XML</td>
<td>2.0</td>
<td>{{CompatGeckoDesktop("1.9.2")}}</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>Suporte básico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>The SVG attribute {{SVGAttr("pointer-events")}}</li>
<li><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit Specs PointerEventsProperty</a> extended for use in (X)HTML content</li>
<li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">60fps scrolling using pointer-events: none</a></li>
</ul>
|
