Usar jQuery para ocultar un DIV cuando el usuario hace clic fuera de él

Será mejor que vayas con algo como esto:

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});

Es posible que desee comprobar el destino del evento de clic que se dispara para el cuerpo en lugar de confiar en stopPropagation.

Algo como:

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

Además, el elemento body puede no incluir todo el espacio visual que se muestra en el navegador. Si observa que sus clics no se registran, es posible que deba agregar el controlador de clics para el elemento HTML en su lugar.

Este código detecta cualquier evento de clic en la página y luego oculta el elemento #CONTAINER si y solo si el elemento clic no era el elemento #CONTAINER ni uno de sus descendientes.

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});

DEMOSTRACIÓN en vivo

Comprobar que el área de clic no está en el elemento objetivo o en su hijo

$(document).click(function (e) {
    if ($(e.target).parents(".dropdown").length === 0) {
        $(".dropdown").hide();
    }
});

ACTUALIZACIÓN:

JQuery detener propagación es la mejor solución

DEMOSTRACIÓN en vivo

$(".button").click(function(e){
    $(".dropdown").show();
     e.stopPropagation();
});

$(".dropdown").click(function(e){
    e.stopPropagation();
});

$(document).click(function(){
    $(".dropdown").hide();
});

$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});

Se ha actualizado la solución a:

• use mouseenter y mouseleave en su lugar
• de hover use enlace de eventos en vivo

var mouseOverActiveElement = false;

$('.active').live('mouseenter', function(){
    mouseOverActiveElement = true; 
}).live('mouseleave', function(){ 
    mouseOverActiveElement = false; 
});
$("html").click(function(){ 
    if (!mouseOverActiveElement) {
        console.log('clicked outside active element');
    }
});

Una solución sin jQuery para la respuesta más popular :

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains

Demostración en Vivo con ESC funcionalidad

Funciona tanto en Escritorio y Móvil

var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});

_{Si para algún caso necesita estar seguro de que su elemento es realmente visible cuando hace clic en el documento: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

¿No funcionaría algo como esto?

$("body *").not(".form_wrapper").click(function() {

});

O

$("body *:not(.form_wrapper)").click(function() {

});

Incluso sórdido:

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});

Y para dispositivos táctiles como IPAD y IPHONE podemos usar el siguiente código

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

Aquí hay un jsfiddle que encontré en otro hilo, funciona con la tecla esc también: http://jsfiddle.net/S5ftb/404

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

    $(document).on('click', function(e) {
      if ($(e.target).closest(el).length === 0) {
        $(el).hide()
      }
    })

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })

Construido a partir de la impresionante respuesta de prc322.

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var container = $(selector);

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.hide();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

Esto añade un par de cosas...

1. Colocado dentro de una función con una devolución de llamada con args "ilimitados"
2. Se ha añadido una llamada a jquery .off () emparejado con un espacio de nombres de evento para desvincular el evento del documento una vez que se ha ejecutado.
3. Touchend incluido para la funcionalidad móvil

Espero que esto ayude a alguien!

En lugar de escuchar cada clic en el DOM para ocultar un elemento específico, podría establecer tabindex como el padre <div> y escuchar los eventos focusout.

Al establecer tabindex se asegurará de que el evento blur se active en el <div> (normalmente no lo haría).

Así que su HTML se vería como:

<div class="form_wrapper" tabindex="0">
    <a class="agree" href="javascript:;">I Agree</a>
    <a class="disagree" href="javascript:;">Disagree</a>
</div>

Y su JS:

$('.form_wrapper').on('focusout', function(event){
    $('.form_wrapper').hide();
});

var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});

Si tiene problemas con ios, mouseup no funciona en el dispositivo Apple.

Mousedown / mouseup en jquery funciona para el ipad?

Yo uso esto:

$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });

 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

p es el nombre del elemento. Donde uno puede pasar el id o la clase o el nombre del elemento también.

Devuelve false si hace clic en .form_wrapper:

$('body').click(function() {
  $('.form_wrapper').click(function(){
  return false
});
   $('.form_wrapper').hide();
});

//$('.form_wrapper').click(function(event){
//   event.stopPropagation();
//});

Adjunte un evento de clic a elementos de nivel superior fuera del envoltorio del formulario, por ejemplo:

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

Esto también funcionará en dispositivos táctiles, solo asegúrese de no incluir un padre de .form_wrapper en su lista de selectores.

$(document).ready(function() {
	$('.modal-container').on('click', function(e) {
	  if(e.target == $(this)[0]) {
		$(this).removeClass('active'); // or hide()
	  }
	});
});

.modal-container {
	display: none;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 999;
}

.modal-container.active {
    display: flex;  
}

.modal {
	width: 50%;
	height: auto;
	margin: 20px;
	padding: 20px;
	background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-container active">
	<div class="modal">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p>
	</div>
</div>

Lo hice así:

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});

dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Quería que me gustara la sugerencia más votada, pero no funcionó para mí.

Este método es casi el mismo pero funcionó para mí. http://www.codesynthesis.co.uk/code-snippets/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it

(Simplemente añadiendo a la respuesta de prc322.)

En mi caso estoy usando este código para ocultar un menú de navegación que aparece cuando el usuario hace clic en una pestaña apropiada. Me pareció útil agregar una condición adicional, que el objetivo del clic fuera del contenedor es no un enlace.

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!$("a").is(e.target) // if the target of the click isn't a link ...
        && !container.is(e.target) // ... or the container ...
        && container.has(e.target).length === 0) // ... or a descendant of the container
    {
        container.hide();
    }
});

Esto se debe a que algunos de los enlaces en mi sitio agregan nuevo contenido a la página. Si este nuevo contenido se agrega al mismo tiempo que desaparece el menú de navegación, podría ser desorientador para usuario.

var exclude_div = $("#ExcludedDiv");;  
$(document).click(function(e){
   if( !exclude_div.is( e.target ) )  // if target div is not the one you want to exclude then add the class hidden
        $(".myDiv1").addClass("hidden");  

}); 

FIDDLE

Mediante el uso de este código puede ocultar tantos elementos como desee

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})

Tantas respuestas, debe ser un derecho de paso para haber añadido una... No vi una respuesta actual (jQuery 3.1.1) - así que:

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});

Lo que puede hacer es vincular un evento de clic al documento que ocultará el menú desplegable si se hace clic en algo fuera del menú desplegable, pero no lo ocultará si se hace clic en algo dentro del menú desplegable, por lo que su evento "mostrar" (o slidedown o lo que muestre el menú desplegable)

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

Luego, cuando lo oculte, desabroche el evento de clic

$(document).unbind('click');