pointer-events
==============

Resumo
------

A propriedade CSS `pointer-events` permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o alvo (en-US) do evento do mouse. Quando essa propriedade não é especificada, as mesmas características do valor `visiblePainted` é aplicada no conteúdo SVG.``

Além de indicar que este elemento não é o alvo do evento do mouse, o valor `none` instrui o evento do mouse a "passar" o elemento e tudo que está "abaixo" deste elemento.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Sintaxe
-------


```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;
```

### Valores

`auto`

O elemento se comporta como se a propriedade `pointer-events` não fosse especificada. Em conteúdo SVG, esse valor e o valor `visiblePainted` tem o mesmo efeito.

`none`

O elemento nunca é o alvo (en-US) de eventos do mouse; contudo, o evento do mouse pode direcionar seus elementos descendentes se esses descendentes tiverem algum outro valor configurado no `pointer-events.` 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/borbulha. (en-US)

`visiblePainted`

Apenas SVG. O elemento pode apenas ser alvo de um evento de mouse quando a propriedade `visibility` é definida como `visible` e quando o cursor do mouse estiver sobre o interior (exemplo: "preenchimento") do elemento e a propriedade `fill` tiver um valor exceto `none`, ou quando o cursor do mouse estiver sobre o perímetro(exemplo: "linha") do elemento e a propriedade `stroke` estiver definida com um valor exceto `none`.

`visibleFill`

Apenas SVG. O elemento apenas pode ser o alvo de um evento mouse quando a propriedade `visibility` é definida como `visible` e quando o cursor do mouse estiver sobre o interior (exemplo: "preenchimento") do elemento. O valor da propriedade `fill` não afeta o processamento dos eventos.

`visibleStroke`

Apenas SVG. O elemento apenas pode ser o alvo de um evento do mouse quando a propriedade `visibility` é definida como `visible` e quando o cursor do mouse estiver sobre o perímetro (exemplo: "linha") do elemento. O valor da propriedade `stroke` não afeta o processamento do evento.

`visible`

Apenas SVG. O elemento pode ser o alvo de um evento de mouse quando a propriedade `visibility` é definida como `visible` e o cursor do mouse estiver sobre ou no interior (exemplo: preenchimento) ou perímetro (exemplo: linha) do elemento. O valor do `fill` e `stroke` não afeta o processamento do evento.

`painted`

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 `fill` definida com valor diferente de `none`, ou quando o cursor do mouse estiver no perímetro(exemplo: "linha") do elemento e a propriedade `stroke` definida com valor diferente de `none`. O valor da propriedade `visibility` não afeta o processamento do evento.

`fill`

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 `fill` e `visibility` não afetam o processamento do evento.

`stroke`

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 `stroke` e `visibility` não afetam o processamento do evento.

`all`

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 `fill`, `stroke` e `visibility` não afetam o processamento do evento.

### Sintaxe formal
```

pointer-events =   
  auto            | (en-US)  
  bounding-box    | (en-US)  
  visiblePainted  | (en-US)  
  visibleFill     | (en-US)  
  visibleStroke   | (en-US)  
  visible         | (en-US)  
  painted         | (en-US)  
  fill            | (en-US)  
  stroke          | (en-US)  
  all             | (en-US)  
  none              
  
```

Exemplos
--------

### Exemplo 1


```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;
}
```

### Exemplo 2

Makes the link to `http://example.com` non-reactive.


```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;
}
```

Notas
-----

Note que previnir um elemento de ser o alvo de eventos de mouse usando `pointer-events` não necessariamente quer dizer que o evento ouvinte do mouse desde elemento *não pode* ou *não vai se* desencadeado. Se um dos elementos filhos tem `pointer-events` explicitamente definidos para *permitir* 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).

Nós gostaríamos de fornecer um controle de textura mais refinado (do que apenas `auto` e `none`) em HTML para que partes de um elemento fizessem com que os eventos mouse "capturem" , e quando. Para nos ajudar a decidir como `pointer-events` 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 dessa wiki page (não se preocupe sobre ficar organizado ).

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 hover se aplicam. Contudo, esses efeitos são muitas vezes despercebidas pelo usuário e principalmente resultam em uma rolagem ruim. Aplicar `pointer-events: none` no `body` desabilita eventos de mouse incluindo hover que resultam em uma performance melhor de rolagem.

Especificações
--------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # pointer-events-control |
| Scalable Vector Graphics (SVG) 2 # PointerEventsProperty |

Compatibilidade do navegador
----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* The SVG attribute `pointer-events (en-US)`
* WebKit Specs PointerEventsProperty extended for use in (X)HTML content
* 60fps scrolling using pointer-events: none