Curso de jQuery | Detectar cuando pulso fuera de cierta capa 1

Curso de jQuery
Detectar cuando pulso fuera de cierta capa

Curso de jQuery | Detectar cuando pulso fuera de cierta capa 2

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");
    }
});