¿Tus elementos invisibles siguen recibiendo clics? Esto lo soluciona 🤯
Hacer que un elemento sea invisible con 'opacity: 0' no significa que haya desaparecido para el navegador. El problema es común: diseñas un menú desplegable o un modal, lo ocultas visualmente, pero el usuario sigue haci
Artículo
Una lectura sobre tecnología y sistemas digitales, escrita para ir al punto y dejar claras las ideas principales.
Tema principal
desarrollo frontend
Fuente
dev.to
Puntos clave
- Hacer que un elemento sea invisible con 'opacity: 0' no significa que haya desaparecido para el navegador.
- El problema es común: diseñas un menú desplegable o un modal, lo ocultas visualmente, pero el usuario sigue haciendo clic en algo que no ve, bloqueando la interacción con el resto de la página.
- El insight clave es entender el 'hit-testing'. El navegador no deshabilita el evento, simplemente decide qué elemento es el objetivo del clic.
- Aquí es donde entra 'pointer-events':
Bloque 1
Hacer que un elemento sea invisible con 'opacity: 0' no significa que haya desaparecido para el navegador.
El problema es común: diseñas un menú desplegable o un modal, lo ocultas visualmente, pero el usuario sigue haciendo clic en algo que no ve, bloqueando la interacción con el resto de la página.
Bloque 2
El insight clave es entender el 'hit-testing'. El navegador no deshabilita el evento, simplemente decide qué elemento es el objetivo del clic.
Aquí es donde entra 'pointer-events':
Bloque 3
• pointer-events: none — El elemento se vuelve "transparente" al puntero. El navegador lo ignora y busca el siguiente elemento interactivo que esté debajo. • Herencia selectiva — Puedes poner 'none' en un contenedor padre para que no bloquee la pantalla, pero restaurar 'auto' en el hijo para que el contenido del modal siga siendo interactivo. • Propagación intacta — Ojo: esto cambia el target del evento, pero no detiene el bubbling. El evento sigue subiendo por el DOM. • No es para accesibilidad — 'pointer-events' no evita que un usuario llegue al elemento mediante el teclado (Tab). Para eso, usa el atributo 'inert' o 'disabled'.
Dominar este detalle es lo que separa una interfaz que se siente "rota" de una experiencia de usuario pulida y profesional.
Bloque 4
¿Ustedes cómo están resolviendo la interactividad en capas complejas de CSS?