👉 Cómo Agregar Funcionalidad de outsideClick en JavaScript

27922

En este breve tutorial, aprenderás cómo agregar la funcionalidad de outsideClick a tu código JavaScript. La funcionalidad de outsideClick te permite ocultar un elemento cuando se hace clic fuera de él. Es especialmente útil para implementar menús desplegables y elementos emergentes en tu sitio web. 💫

Paso 1: Agregar los elementos al HTML

En tu archivo HTML, asegúrate de tener los elementos que deseas controlar con outsideClick. Por ejemplo, puedes tener un elemento <li> con la clase “navbar-email” que muestra una dirección de correo electrónico y un elemento <div> con la clase “desktop-menu” que es el menú desplegable. Asegúrate de ajustar el HTML según tus necesidades:

<liclass="navbar-email">[email protected]</li>

<divclass="desktop-menu inactive">

Paso 2: Seleccionar los elementos con JavaScript

En tu archivo JavaScript, selecciona los elementos que deseas controlar con outsideClick. Puedes utilizar el método document.querySelector() para seleccionar elementos por su clase o identificador. Por ejemplo:

const navEmail = document.querySelector(".navbar-email");
const desktopMenu = document.querySelector(".desktop-menu");

Aquí hemos seleccionado el elemento con la clase “navbar-email” y el elemento con la clase “desktop-menu”. Asegúrate de ajustar las clases según los elementos que tengas en tu propio HTML. 😊

Paso 3: Agregar el event listener

Agregaremos un event listener al elemento que desencadena la acción de mostrar u ocultar el menú desplegable. En este caso, utilizaremos el evento de clic para activar la funcionalidad de outsideClick. Añade el siguiente código:

navEmail.addEventListener("click", toggleDesktopMenu);

functiontoggleDesktopMenu() {
  desktopMenu.classList.toggle("inactive");
}

Aquí hemos agregado un event listener al elemento navEmail, de modo que cuando se haga clic en él, se llamará a la función toggleDesktopMenu(). Esta función utiliza classList.toggle() para agregar o quitar la clase “inactive” del elemento desktopMenu. ¡Así podrás mostrar u ocultar el menú desplegable al hacer clic en el correo electrónico! 😄

Paso 4: Agregar la funcionalidad de outsideClick

Ahora vamos a agregar la funcionalidad de outsideClick para ocultar el menú desplegable cuando se haga clic fuera de él. Añade el siguiente código después del código anterior:

document.addEventListener("click", function (event) {
  const target = event.target;
  const isNavEmail = target === navEmail || navEmail.contains(target);
  const isDesktopMenu = target === desktopMenu || desktopMenu.contains(target);

  if (!isNavEmail && !isDesktopMenu) {
    desktopMenu.classList.add("inactive");
  }
});

Aquí hemos agregado un event listener al documento (document) que escucha los eventos de clic (“click”). Dentro de la función del event listener, verificamos si el clic ocurrió dentro del elemento navEmail o desktopMenu utilizando los métodos target === element y element.contains(target). Si el clic ocurrió fuera de estos elementos, agregamos la clase “inactive” al elemento desktopMenu, ocultando así el menú desplegable. ¡Ya podrás cerrar el menú desplegable al hacer clic en cualquier parte fuera de él! 🚀

¡Excelente trabajo! Ahora puedes aplicar esta funcionalidad de outsideClick a tus propios proyectos y seguir mejorando tus habilidades en frontend development. Si tienes alguna pregunta adicional, ¡no dudes en preguntar! Estoy aquí para ayudarte. 😊

hace 2 años