Cómo controlar la interacción con pointer-events en CSS
¿Qué es pointer-events y cómo se utiliza?
pointer-events controla si un elemento acepta eventos de interacción (clics, desplazamiento, etc.) o los ignora por completo, permitiendo que dichos eventos pasen a los elementos que están detrás de él en el orden de apilamiento. Se usa principalmente para habilitar o deshabilitar la interacción, pero también para controlar eventos en SVG y gráficos.
Sintaxis básica:
.elemento {
pointer-events: none;
}
En este ejemplo, el elemento con la clase .elemento no responderá a los clics, desplazamientos o eventos del ratón, permitiendo que los elementos debajo de él sigan recibiendo estos eventos.
Valores de pointer-events
1. auto: Valor predeterminado. El elemento acepta eventos de interacción normalmente.
2. none: Desactiva la interacción del elemento con el puntero. Cualquier clic o evento pasará al elemento subyacente.
3. Otros valores específicos: Para gráficos SVG, existen valores como visiblePainted, visibleFill, visibleStroke, entre otros, para controlar eventos según las áreas de relleno o contorno del elemento.
Ejemplos de uso con pointer-events
1. Ignorar clics en un contenedor:
.superposicion {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
pointer-events: none; /* Ignora los eventos de puntero */
}Este ejemplo crea un contenedor de superposición semi-transparente que no bloquea la interacción con los elementos subyacentes.
2. Desactivar enlaces o botones:
.enlace-desactivado {
color: gray;
pointer-events: none;
cursor: not-allowed; /* Cambia el cursor para indicar que está desactivado */
}Ideal para indicar visualmente que un enlace o botón no está disponible temporalmente, evitando que el usuario haga clic en ellos.
3. Permitir interacción en un área específica:
.contenedor {
pointer-events: none; /* Desactiva la interacción en todo el contenedor */
}
.contenedor .activo {
pointer-events: auto; /* Reactiva la interacción solo en este elemento */
}Este uso es útil cuando se desea desactivar una sección completa, pero permitir la interacción en elementos hijos específicos, como botones o enlaces dentro del contenedor.
4. Crear tooltips sin bloquear el contenido:
.tooltip {
position: absolute;
background: yellow;
padding: 10px;
pointer-events: none; /* El tooltip no bloquea la interacción con el contenido */
}
Al aplicar pointer-events: none en un tooltip, este no impedirá que el usuario interactúe con el contenido debajo de él.
¿Cuándo usar pointer-events en CSS?
- Superposiciones y capas: Para crear elementos que se posicionan sobre otros (como overlays o tooltips) sin bloquear el acceso a los elementos de fondo.
-
Deshabilitar temporalmente elementos: En lugar de usar JavaScript para eliminar eventos,
pointer-events: nonees una forma rápida de desactivar interacciones. - Optimizar la experiencia de usuario: Evita que elementos invisibles o transparentes intercepten eventos de clic por accidente.
Consideraciones al usar pointer-events
-
Accesibilidad: Al usar
pointer-events: none, asegúrate de comunicar visualmente el estado desactivado del elemento, por ejemplo, cambiando el color o el cursor (cursor: not-allowed) para indicar que no se puede hacer clic. -
Eventos táctiles: La propiedad
pointer-eventsafecta tanto a eventos de ratón como táctiles, por lo que desactivar los eventos de puntero en dispositivos móviles puede impedir interacciones esenciales.
Referencia oficial
Para más detalles y valores avanzados de esta propiedad, consulta la documentación oficial de MDN sobre pointer-events.
Jorge García
Fullstack developer