Puntero-eventos - Trucos CSS | Almanaque CSS 2024

La pointer-eventspropiedad permite controlar cómo los elementos HTML responden a los eventos táctiles / del mouse, incluidos los estados activos / de desplazamiento de CSS, los eventos de clic / toque en Javascript y si el cursor está visible o no.

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

Si bien la pointer-eventspropiedad toma once valores posibles, todos menos tres están reservados para su uso con SVG. Los tres valores válidos para cualquier elemento HTMl son:

none evita todas las opciones de clic, estado y cursor en el elemento HTML especificado
autorestaura la funcionalidad predeterminada (útil para su uso en elementos secundarios de un elemento con pointer-events: none;especificada
inheritusará el pointer-eventsvalor del padre del elemento

¡Mira este bolígrafo!

Como se demostró anteriormente, el caso de uso principal pointer-eventses permitir que el comportamiento de clic o toque "pase" de un elemento a otro elemento debajo de él en el eje Z. Por ejemplo, esto sería útil para superposiciones gráficas o para ocultar elementos con opacity(por ejemplo, información sobre herramientas) y aún permitir la selección de texto en el contenido debajo.

Puntos de interés

“El uso de eventos de puntero en CSS para elementos que no son SVG es experimental. La función solía ser parte del borrador de la especificación de la interfaz de usuario de CSS3 pero, debido a muchos problemas abiertos, se ha pospuesto a CSS4 ". - Mozilla MDN
"Si agrega un detector de eventos de clic a un elemento, luego elimina el estilo de eventos de puntero (o cambia su valor a automático, el evento de clic activará la funcionalidad designada. Básicamente, el evento de clic respeta el valor de eventos de puntero"). David Walsh

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.