MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Resumo

A propriedade CSS pointer-events permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o alvo 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 valueauto
Aplica-se aall elements
Inheritedyes
Midiavisual
Computed valueas specified
Animatablenão
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

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 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.
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

auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

Exemplos

Exemplo 1

/* 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.

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

Especificações Status Comentário
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'pointer-events' in that specification.
Recommendation  

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 nível 4.

Compatibilidade do navegador

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte SVG 1.0 1.5 (1.8) 9.0 9.0 (2.0) 3.0 (522)
Conteúdo HTML/XML 2.0 3.6 (1.9.2) 11.0 15.0 4.0 (530)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico ? ? ? ? ?

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: Sebastianz, brunoeduardo
 Última atualização por: Sebastianz,