Eventos de ponteiro - CSS-Tricks

A pointer-eventspropriedade permite controlar como os elementos HTML respondem a eventos de mouse / toque - incluindo CSS hover / estados ativos, eventos de clique / toque em Javascript e se o cursor está ou não visível.

.avoid-clicks ( pointer-events: none; )

Embora a pointer-eventspropriedade tenha onze valores possíveis, todos, exceto três, são reservados para uso com SVG. Os três valores válidos para qualquer elemento HTMl são:

none impede todas as opções de clique, estado e cursor no elemento HTML especificado
autorestaura a funcionalidade padrão (útil para utilização em elementos de criança com um elemento pointer-events: none;especificado
inheritusará o pointer-eventsvalor do pai do elemento

Confira esta Caneta!

Conforme demonstrado acima, o principal caso de uso para pointer-eventsé permitir que o comportamento de clique ou toque “passe” de um elemento para outro elemento abaixo dele no eixo Z. Por exemplo, isso seria útil para sobreposições de gráficos ou ocultar elementos com opacity(por exemplo, dicas de ferramentas) e ainda permitir a seleção de texto no conteúdo abaixo dele.

Pontos de interesse

“O uso de eventos de ponteiro em CSS para elementos não SVG é experimental. O recurso fazia parte da especificação de rascunho da IU do CSS3, mas, devido a muitos problemas em aberto, foi adiado para o CSS4. ” - Mozilla MDN
“Se você adicionar um ouvinte de evento de clique a um elemento e remover o estilo de eventos de ponteiro (ou alterar seu valor para automático, o evento de clique disparará a funcionalidade designada. Basicamente, o evento de clique respeita o valor de eventos de ponteiro.” - David Walsh

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.