---
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">&lt;ul&gt;
  &lt;li&gt;&lt;a href="https://developer.mozilla.org"&gt;MDN&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://example.com"&gt;example.com&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</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>