Propiedad CSS pointer-events
Usa la propiedad pointer-events para controlar si un elemento responde a eventos táctiles. Consulta los valores y ejemplos de la propiedad.
La propiedad pointer-events controla si un elemento puede ser el destino de eventos de puntero — clics de ratón, hover, toque y entrada de lápiz. Cuando se establece en none, el elemento se vuelve "transparente" al puntero: los clics, hovers y otras interacciones pasan directamente a través de él hacia lo que se encuentre debajo.
Esta página explica los valores de la propiedad, dónde funciona realmente en HTML frente a SVG, los casos de uso comunes en el mundo real y los errores frecuentes que confunden a los desarrolladores.
Definido originalmente para SVG, pointer-events es ahora una propiedad CSS estándar.
Muchos valores se aplican únicamente a elementos SVG. Para los elementos HTML ordinarios, solo auto y none tienen amplio soporte — los valores específicos de SVG (fill, stroke, visiblePainted, etc.) no tienen efecto en HTML.
Cuándo usarlo
- Superposiciones de clic a través. Una superposición decorativa o de carga cubre la página, pero deseas que los clics lleguen al contenido que hay detrás. Establece
pointer-events: noneen la superposición. - Deshabilitar un control visualmente. Combina
pointer-events: nonecon unaopacityreducida para que un botón o enlace parezca y se comporte como deshabilitado (los enlaces no tienen un atributodisablednativo, por lo que este es un patrón común). - Permitir que los eventos atraviesen formas SVG específicas. Una forma dibujada sobre otras puede hacerse no interactiva para que las formas que hay debajo sigan siendo clicables.
- Reactivar un hijo dentro de un padre deshabilitado. Establece
noneen un contenedor yautoen un hijo para que solo ese hijo sea interactivo.
Notas importantes
Establecer pointer-events: none en un elemento impide que sea el destino de eventos de puntero, pero no detiene la ejecución de los escuchadores de eventos en ese elemento. Si un elemento hijo tiene pointer-events reactivado (auto), el hijo aún puede ser objetivo. Los eventos que apuntan al hijo ascienden a través del padre y activan cualquier escuchador adjunto a él.
pointer-events: none solo bloquea la entrada de puntero. No elimina el elemento del orden de tabulación, por lo que los usuarios de teclado aún pueden acceder a un enlace o botón "deshabilitado" mediante la tecla Tab. Para una accesibilidad real, elimina también el elemento del orden de tabulación (tabindex="-1") o usa el atributo disabled real en los controles de formulario.
| Valor inicial | auto |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredado | No. |
| Animatable | No. |
| Versión | Scalable Vector Graphics (SVG) 1.1 (Segunda Edición). |
| Sintaxis DOM | object.style.pointerEvents = "auto"; |
Sintaxis
Sintaxis CSS de pointer-events
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | initial | inherit;Ejemplo de la propiedad pointer-events:
Ejemplo 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>Resultado
En el ejemplo anterior, pasa el cursor sobre cada caja. El primer <div> (pointer-events: none) no responde — su enlace no es clicable y no aparece ningún contorno al pasar el cursor. El segundo <div> (pointer-events: auto) se comporta con normalidad.
Patrón común: un enlace deshabilitado
Dado que las anclas no tienen un atributo disabled, pointer-events: none es la forma habitual de hacer que un enlace no sea clicable. Combínalo con opacity para que el estado sea visible:
.btn-link.is-disabled {
pointer-events: none;
opacity: 0.5;
cursor: default;
}Recuerda la advertencia de accesibilidad anterior: el enlace sigue siendo accesible mediante teclado a menos que también establezcas tabindex="-1".
Ejemplo con la etiqueta <svg>
En SVG, pointer-events puede dirigir los clics a través de formas apiladas. En el siguiente ejemplo, el path con clase .c usa pointer-events: none, por lo que los clics pasan a través de él hacia las formas que hay debajo, mientras que .d usa pointer-events: all para capturar eventos incluso donde su relleno es transparente:
Ejemplo del valor none de 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>Valores
| Valor | Descripción |
|---|---|
| none | El elemento nunca reacciona a los eventos de puntero. |
| auto | El elemento acepta eventos de puntero como clics, hover, etc. Este es el valor predeterminado de esta propiedad. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Valores exclusivos de SVG
| Valor | Descripción |
|---|---|
| visiblePainted | El elemento solo puede ser el destino de un evento de puntero cuando la propiedad visibility está establecida en visible, el cursor del ratón está sobre el interior o el perímetro del elemento, y la propiedad fill o stroke está establecida en un valor distinto de none. |
| visibleFill | El elemento solo puede ser el destino de un evento de puntero cuando la propiedad visibility está establecida en visible y el cursor del ratón está sobre el interior del elemento. |
| visibleStroke | El elemento solo puede ser el destino de un evento de puntero cuando la propiedad visibility está establecida en visible y el cursor del ratón está sobre el perímetro del elemento. |
| visible | El elemento solo puede ser el destino de un evento de puntero cuando la propiedad visibility está establecida en visible y el cursor del ratón está sobre el interior o el perímetro del elemento. |
| painted | El elemento solo puede ser el destino de un evento de puntero cuando el cursor del ratón está sobre el interior o el perímetro del elemento y la propiedad fill o stroke está establecida en un valor distinto de none. |
| fill | El elemento solo puede ser el destino de un evento de puntero cuando el puntero está sobre el interior del elemento. |
| stroke | El elemento solo puede ser el destino de un evento de puntero cuando el puntero está sobre el perímetro del elemento. |
| all | El elemento solo puede ser el destino de un evento de puntero cuando el puntero está sobre el interior o el perímetro del elemento. |
Propiedades relacionadas
cursor— cambia el cursor del ratón que se muestra sobre un elemento (usacursor: not-allowedpara reforzar un aspecto deshabilitado).visibility—visibility: hiddentambién elimina un elemento de la interacción con el puntero, pero también oculta el elemento.opacity— se combina habitualmente conpointer-events: nonepara representar un estado deshabilitado.user-select— controla si el texto dentro de un elemento puede seleccionarse.