¿Cómo se detecta un clic fuera de un elemento?

Tengo algunos menús HTML, que muestro completamente cuando un usuario hace clic en la cabeza de estos menús. Me gustaría ocultar estos elementos cuando el usuario hace clic fuera de los menús' área.

¿Es posible algo así con jQuery?

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});
Solución

NOTA: El uso de stopEventPropagation() es algo que debe evitarse ya que rompe el flujo normal de eventos en el DOM. Ver este artículo para más información. Considere usar este método en su lugar

Adjuntar un evento de clic al cuerpo del documento que cierre la ventana. Adjunte un evento de clic separado al contenedor que detenga la propagación al cuerpo del documento.

$(window).click(function() {
//Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});
Comentarios (30)

Tengo una aplicación que funciona de forma similar al ejemplo de Eran, salvo que adjunto el evento de clic al cuerpo cuando abro el menú... Más o menos así:

$('#menucontainer').click(function(event) {
  $('html').one('click',function() {
    // Hide the menus
  });

  event.stopPropagation();
});

Más información sobre la función one() de jQuery

Comentarios (7)

Comprueba el destino del evento de clic de la ventana (debería propagarse a la ventana, siempre que no se capture en ningún otro lugar), y asegúrate de que no es ninguno de los elementos del menú. Si no lo es, entonces está fuera de su menú.

O comprueba la posición del clic, y mira si está contenido dentro del área del menú.

Comentarios (0)