septiembre 22, 2021

Cerrar Div o Menú al hacer clic Fuera con w / Javascript

Si programa en Javascript, probablemente haya encontrado la situación en la que desea tener menús que se abren con un clic y que se cierren cuando el usuario hace clic fuera del menú. He desarrollado una manera bastante sencilla de hacer esto. Añado un oyente de eventos en el cuerpo del documento. Cuando alguien hace clic, buscamos el identificador de destino del evento. Si coincide con el identificador del div del cuadro, no haga nada. Si no lo hace, cierre el menú.

Si lo hacemos un poco más allá, es ineficiente dejar un oyente de eventos de clic en todo el cuerpo cuando no se utiliza. En este caso, si el menú todavía no se ha abierto, no hay ninguna razón para escuchar un clic fuera del menú. Agregue el oyente de eventos a la devolución de llamada del div que se muestra. En esta misma línea, cuando se vuelva a ocultar el div, elimine el oyente de eventos.



Click inside the black box, nothing happens. Click outside, it disappears

$('#showbox').click(function(){ $('#bigbox').show(function(){ document.body.addEventListener('click', boxCloser, false); }); }); function boxCloser(e){ if(e.target.id != 'bigbox'){ document.body.removeEventListener('click', boxCloser, false); $('#bigbox').hide(); } }

Asegúrese también de incluir jQuery en su proyecto, ya que algunas de las funciones anteriores utilizan esta biblioteca.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *