pointer-events
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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 value | auto |
---|---|
Aplica-se a | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
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 valorvisiblePainted
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 comovisible
e quando o cursor do mouse estiver sobre o interior (exemplo: "preenchimento") do elemento e a propriedadefill
tiver um valor excetonone
, ou quando o cursor do mouse estiver sobre o perímetro(exemplo: "linha") do elemento e a propriedadestroke
estiver definida com um valor excetonone
. visibleFill
-
Apenas SVG. O elemento apenas pode ser o alvo de um evento mouse quando a propriedade
visibility
é definida comovisible
e quando o cursor do mouse estiver sobre o interior (exemplo: "preenchimento") do elemento. O valor da propriedadefill
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 comovisible
e quando o cursor do mouse estiver sobre o perímetro (exemplo: "linha") do elemento. O valor da propriedadestroke
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 comovisible
e o cursor do mouse estiver sobre ou no interior (exemplo: preenchimento) ou perímetro (exemplo: linha) do elemento. O valor dofill
estroke
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 denone
, ou quando o cursor do mouse estiver no perímetro(exemplo: "linha") do elemento e a propriedadestroke
definida com valor diferente denone
. O valor da propriedadevisibility
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
evisibility
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
evisibility
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
evisibility
não afetam o processamento do evento.
Sintaxe formal
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
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
Veja também
- The SVG attribute
pointer-events
- WebKit Specs PointerEventsProperty extended for use in (X)HTML content
- 60fps scrolling using pointer-events: none