Propriedade Pointer Events
Última atualização: 2026-09-13
pointer-events Propriedade Pointer Events
A propriedade pointer-events controla se um elemento pode se tornar o alvo de eventos de ponteiro, como cliques e passagens do mouse. Quando definida como none, o elemento ignora completamente os eventos de ponteiro e eles atravessam para os elementos abaixo. É uma ferramenta comum para clique através, desativação de interação e interações complexas de UI em camadas.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Sim |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
pointer-events: auto | none;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | none | Palavra-chave | Se o elemento responde a eventos de ponteiro |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| pointer-events | ✓ v1 | ✓ v12 | ✓ v1.5 | ✓ v4 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： pointer-events: none faz o elemento e todos os seus filhos ignorarem eventos de ponteiro. Para que um filho responda novamente, você deve definir pointer-events: auto nesse filho explicitamente.
Aviso： pointer-events: none não afeta eventos de teclado nem o foco. O elemento ainda pode receber foco com a tecla Tab; combine-o com tabindex="-1" para desabilitá-lo completamente.
❓ Perguntas Frequentes
QQual é a diferença entre pointer-events: none e disabled?
Adisabled é um atributo HTML: além de bloquear a interação, ele altera o estilo padrão do controle, impede o envio do formulário e suprime eventos de clique. O pointer-events: none apenas faz o elemento ignorar eventos de ponteiro — sua aparência permanece a mesma, ainda pode receber foco pelo teclado e ainda é enviado com o formulário. Para desabilitar totalmente um controle de formulário, prefira disabled.
QO valor pointer-events: none bloqueia eventos de toque em dispositivos móveis?
ASim. O pointer-events: none trata todos os dispositivos de entrada de ponteiro da mesma forma, incluindo mouse, caneta stylus e touchscreen. Uma vez definido, o elemento nunca se torna o alvo de um evento de ponteiro — cliques, toques e passagens do mouse atravessam para a camada inferior. Ele não afeta eventos de teclado, porém: o elemento ainda pode receber foco com Tab, então adicione tabindex="-1" para bloquear isso também.
QQual é a diferença entre pointer-events: none e visibility: hidden?
Avisibility: hidden torna um elemento invisível e completamente não interativo, mas ainda ocupa espaço de layout, e os filhos podem ser exibidos novamente com visibility: visible. Um elemento com pointer-events: none permanece visível, selecionável e focalizável — ele simplesmente ignora eventos de ponteiro, que então atravessam para os elementos abaixo. Use o primeiro para ocultar e o segundo para deixar os eventos passarem.
QComo faço cliques atravessarem uma sobreposição até o elemento abaixo?
ADefina pointer-events: none na sobreposição superior e os eventos de ponteiro atravessarão para o elemento abaixo. Casos típicos: sobreposições puramente decorativas, como um véu semitransparente adicionado com ::before, camadas de anotação em mapas e tooltips personalizados. Se a sobreposição contiver botões que precisam ser clicáveis, restaure pointer-events: auto nesses botões individualmente.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
