Definición de .pointer-events aplicado en CSS
La propiedad .pointer-events permite el control sobre cómo los elementos HTML responden a los eventos de mouse/táctil, incluidos los estados CSS Hover/Active, hacen clic/toque eventos en JavaScript y si el cursor es visible o no.
Caso de empleo de pointer-events
Esta propiedad de CSS normalmente se emplea de esta forma:
.avoid-clicks {
pointer-events: none;
}Otro ejemplo más avanzado de .pointer-events es el siguiente de CODEPEN:
Sintaxis de .pointer-events en CSS
pointer-events: auto|none;Valores
| El valor de la propiedad | Descripción |
|---|---|
| auto | El elemento reacciona a eventos de puntero, como :pasar y hacer clic. esto es por defecto |
| ninguna | El elemento no reacciona a los eventos de puntero. |
| inicial | Establece esta propiedad en su valor predeterminado. |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .pointer-events
Los números de la tabla detallan la primera versión del navegador que es absolutamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| position | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
Note: The sticky value is not supported in Internet Explorer or Edge 15 and earlier versions.
