Cerrar div o menú al hacer clic fuera con Javascript

Si programa en Javascript, probablemente se haya encontrado con la situación en la que desea tener menús que se abren con un clic y que se cierran cuando el usuario hace clic fuera del menú. He desarrollado una forma bastante sencilla de hacerlo. Agrego un detector de eventos al cuerpo del documento. Cuando alguien hace clic en él, buscamos el ID de destino del evento. Si coincide con el ID del div del cuadro, no haga nada. Si no es así, cierre el menú.

Llevando esto un poco más lejos, es ineficaz dejar un detector de eventos de clic en todo el cuerpo cuando no se está utilizando. En este caso, si el menú aún no se ha abierto, no hay razón para escuchar un clic fuera del menú. Agregue el detector de eventos en la devolución de llamada del div que se muestra. En ese mismo sentido, cuando el div se vuelva a ocultar, elimine el detector 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(); } }

También asegúrese de incluir jQuery en su proyecto, ya que algunas de las funciones anteriores utilizan esa biblioteca.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *