W3docs
pt
Entrar

Propriedade CSS pointer-events

Use a propriedade pointer-events para controlar se um elemento responde a eventos de toque. Veja valores e exemplos práticos.

A propriedade pointer-events controla se um elemento pode ser o alvo de eventos de ponteiro — cliques do mouse, hover, toque e entrada de caneta. Quando definida como none, o elemento se torna "transparente" ao ponteiro: cliques, hovers e outras interações passam diretamente por ele, chegando ao que estiver por baixo.

Esta página explica os valores da propriedade, onde ela funciona de fato em HTML versus SVG, os casos de uso comuns no mundo real e as armadilhas que costumam pegar as pessoas de surpresa.

Informação

Originalmente definida para SVG, a propriedade pointer-events é agora uma propriedade CSS padrão.

Muitos valores se aplicam apenas a elementos SVG. Para elementos HTML comuns, apenas auto e none são amplamente suportados — os valores específicos do SVG (fill, stroke, visiblePainted, etc.) não têm efeito em HTML.

Quando Usar

  • Sobreposições clicáveis. Uma sobreposição decorativa ou de carregamento cobre a página, mas você quer que os cliques cheguem ao conteúdo por trás dela. Defina pointer-events: none na sobreposição.
  • Desabilitando um controle visualmente. Combine pointer-events: none com opacity reduzida para fazer um botão ou link parecer e se comportar como desabilitado (links não têm atributo disabled nativo, por isso este é um padrão comum).
  • Permitindo que eventos atravessem formas SVG específicas. Uma forma desenhada sobre outras pode ser tornada não interativa para que as formas abaixo permaneçam clicáveis.
  • Reabilitando um filho dentro de um pai desabilitado. Defina none num elemento pai e auto em um filho para tornar apenas esse filho interativo.

Notas Importantes

Definir pointer-events: none em um elemento impede que ele seja o alvo de eventos de ponteiro, mas isso não impede que os listeners de evento nesse elemento sejam acionados. Se um elemento filho tiver pointer-events reabilitado (auto), o filho ainda pode ser alvo. Os eventos que atingem o filho então propagam pelo pai e acionam quaisquer listeners associados a ele.

Aviso

pointer-events: none bloqueia apenas a entrada do ponteiro. Ele não remove o elemento da ordem de tabulação, portanto usuários de teclado ainda podem acessar um link ou botão "desabilitado" por meio da tecla Tab. Para acessibilidade genuína, também remova o elemento da ordem de tabulação (tabindex="-1") ou use o atributo disabled real em controles de formulário.

Valor Inicialauto
Aplica-se aTodos os elementos.
HerdadoNão.
AnimávelNão.
VersãoScalable Vector Graphics (SVG) 1.1 (Second Edition).
Sintaxe DOMobject.style.pointerEvents = "auto";

Sintaxe

Sintaxe CSS de pointer-events

pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | initial | inherit;

Exemplo da propriedade pointer-events:

Exemplo de código CSS pointer-events

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        pointer-events: none;
      }
      div.example2 {
        pointer-events: auto;
      }
      div.example:hover,
      div.example2:hover {
        outline: 2px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>The Pointer-events Property</h2>
    <h3>Pointer-events: none</h3>
    <div class="example">
      Click here: <a href="https://www.w3docs.com/learn-javascript.html">JavaScript Tutorial</a>
    </div>
    <h3>Pointer-events: auto</h3>
    <div class="example2">
      Click here: <a href="https://www.w3docs.com/learn-css.html">CSS Tutorial</a>
    </div>
  </body>
</html>
Experimente Você Mesmo »

Resultado

CSS pointer-events valor none

No exemplo acima, passe o mouse sobre cada caixa. O primeiro <div> (pointer-events: none) não responde — seu link não é clicável e nenhum contorno aparece ao passar o mouse. O segundo <div> (pointer-events: auto) se comporta normalmente.

Como âncoras não têm atributo disabled, pointer-events: none é a maneira usual de tornar um link não clicável. Combine com opacity para que o estado seja visível:

.btn-link.is-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}

Lembre-se da ressalva de acessibilidade acima: o link ainda pode ser alcançado pelo teclado, a menos que você também defina tabindex="-1".

Exemplo com a tag <svg>

Em SVG, pointer-events pode direcionar cliques através de formas empilhadas. No próximo exemplo, o caminho com a classe .c usa pointer-events: none, portanto os cliques passam por ele para as formas abaixo, enquanto .d usa pointer-events: all para capturar eventos mesmo onde seu preenchimento é transparente:

Exemplo de valor none em CSS pointer-events

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        fill: #ccc;
      }
      .b {
        fill: #8ebf42;
      }
      .c {
        fill: #1c87c9;
        pointer-events: none;
      }
      .d {
        stroke: #666;
        fill: none;
        pointer-events: all;
      }
      .box:hover {
        stroke: #000;
        stroke-width: 5;
      }
    </style>
  </head>
  <body>
    <h2>Pointer-events property example</h2>
    <svg width="300" height="300">
      <g transform="translate(20, 20)">
        <path class="a box" d="M 0 0 L 100 0 L 100 100 L 0 100 z" />
        <path class="b box" d="M 50 50 l 100 0 l 0 100 l -100 0 z" />
        <path class="c box" d="M 100 100 l 100 0 l 0 100 l -100 0 z" />
        <path class="d box" d="M 150 150 l 100 0 l 0 100 l -100 0 z" />
      </g>
    </svg>
  </body>
</html>
Experimente Você Mesmo »

Valores

ValorDescrição
noneO elemento nunca reage a eventos de ponteiro.
autoO elemento aceita eventos de ponteiro como cliques, hover, etc. Este é o valor padrão desta propriedade.
initialFaz a propriedade usar seu valor padrão.
inheritHerda a propriedade do seu elemento pai.

Valores Exclusivos para SVG

ValorDescrição
visiblePaintedO elemento só pode ser alvo de um evento de ponteiro quando a propriedade visibility está definida como visible, o cursor do mouse está sobre o interior ou perímetro do elemento, e a propriedade fill ou stroke está definida com um valor diferente de none.
visibleFillO elemento só pode ser alvo de um evento de ponteiro quando a propriedade visibility está definida como visible e o cursor do mouse está sobre o interior do elemento.
visibleStrokeO elemento só pode ser alvo de um evento de ponteiro quando a propriedade visibility está definida como visible e o cursor do mouse está sobre o perímetro do elemento.
visibleO elemento só pode ser alvo de um evento de ponteiro quando a propriedade visibility está definida como visible e o cursor do mouse está sobre o interior ou o perímetro do elemento.
paintedO elemento só pode ser alvo de um evento de ponteiro quando o cursor do mouse está sobre o interior ou perímetro do elemento e a propriedade fill ou stroke está definida com um valor diferente de none.
fillO elemento só pode ser alvo de um evento de ponteiro quando o ponteiro está sobre o interior do elemento.
strokeO elemento só pode ser alvo de um evento de ponteiro quando o ponteiro está sobre o perímetro do elemento.
allO elemento só pode ser alvo de um evento de ponteiro quando o ponteiro está sobre o interior ou o perímetro do elemento.

Propriedades Relacionadas

  • cursor — altera o cursor do mouse exibido sobre um elemento (use cursor: not-allowed para reforçar a aparência de desabilitado).
  • visibility — visibility: hidden também remove um elemento da interação com o ponteiro, mas também oculta o elemento.
  • opacity — frequentemente combinada com pointer-events: none para renderizar um estado desabilitado.
  • user-select — controla se o texto dentro de um elemento pode ser selecionado.

Prática

Prática
O que a propriedade 'pointer-events' no CSS faz?
O que a propriedade 'pointer-events' no CSS faz?
Was this page helpful?