Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
En esta lección aprenderás a detectar cuando un usuario hace clic fuera de un elemento específico en una página web. Esto es útil para cerrar menús desplegables, ocultar modales o ejecutar acciones cuando el usuario hace clic fuera de un área determinada.
🎯 ¿Para qué sirve esta funcionalidad?
Algunas aplicaciones de esta técnica incluyen:
✅ Cerrar un menú cuando el usuario haga clic fuera de él.
✅ Ocultar un cuadro de diálogo al hacer clic fuera.
✅ Detectar clics fuera de un área específica para realizar una acción.
🔹 Método con JavaScript puro
Puedes usar addEventListener() junto con contains() para verificar si el clic ocurrió fuera de un elemento.
window.addEventListener('click', function(e){
if (document.getElementById('amor').contains(e.target)){
} else{
amor.classList.remove('desplegado');
}
});📚 Explicación del código
1️⃣ window.addEventListener('click', function(e) {...} → Detecta cualquier clic en la ventana.
2️⃣ document.getElementById('amor').contains(e.target) → Verifica si el clic ocurrió dentro del elemento con ID amor.
3️⃣ Si el clic fue fuera, se ejecuta amor.classList.remove('desplegado'); → Se oculta el elemento.
🔹 Método con jQuery
Si prefieres jQuery, puedes usar .click() y !$(event.target).closest() para lograr el mismo efecto:
$(document).click(function(event) {
if (!$(event.target).closest("#amor").length) {
$("#amor").removeClass("desplegado");
}
});