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

Estoy usando este código:

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

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

Y este HTML :

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

El problema es que tengo enlaces dentro divy cuando ya no funcionan cuando se hace clic.

Tuve el mismo problema, se me ocurrió esta solución fácil. Incluso funciona de forma recursiva:

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

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

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();
    });
});

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

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

Es posible que desee verificar 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 del cuerpo 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.

Demo en vivo

El área de clic de verificación no está en el elemento de destino o en su elemento secundario

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

ACTUALIZAR:

jQuery detener la propagación es la mejor solución

Demo 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 actualizó la solución a:

• use mouseenter y mouseleave en su lugar
• de vuelo estacionario use enlace de evento 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 ESCfuncionalidad

Funciona tanto en computadoras de escritorio como en dispositivos móviles

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

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

_{Si en algún caso necesita asegurarse de que su elemento sea realmente visible cuando haga 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 aguijón:

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

En lugar de escuchar cada clic en el DOM para ocultar un elemento específico, puede establecer tabindexel elemento primario <div>y escuchar los focusouteventos.

La configuración tabindexse asegurará de que el blurevento se active en <div>(normalmente no lo haría).

Entonces su HTML se vería así:

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

Y tu JS:

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

Y para dispositivos táctiles como IPAD e 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, también funciona con la clave esc: 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()
      }
    })

Creado a partir de la increíble 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 agrega un par de cosas ...

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

¡Espero que esto ayude a alguien!

Si tiene problemas con iOS, el mouseup no funciona en dispositivos 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();
          }
      });

(Solo agregando 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 la pestaña correspondiente. Descubrí que era útil agregar una condición adicional, que el objetivo del clic fuera del contenedor no es 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 de mi sitio agregan contenido nuevo a la página. Si este nuevo contenido se agrega al mismo tiempo que desaparece el menú de navegación, puede ser desorientador para el usuario.

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

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

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

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

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

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

pes el nombre del elemento Donde se puede pasar la identificación o clase o nombre del elemento también.

Devuelve falso 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 contenedor 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.

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");  

}); 

VIOLÍN

Copiado de https://sdtuts.com/click-on-not-specified-element/

Demostración en vivo http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {
    var is_specified_clicked;
    $(".specified_element").click(function () {
        is_specified_clicked = true;
        setTimeout(function () {
            is_specified_clicked = false;
        }, 200);
    })
    $("*").click(function () {
        if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
            $(".event_result").text("you were clicked on specified element");
        } else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
            $(".event_result").text("you were clicked not on specified element");
        }
    })
})

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);
    }
});

Al usar 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';
    }
   }
})

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 "show" (o menú desplegable o lo que sea muestra 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, al ocultarlo, desvincula el evento de clic

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

Según los documentos , .blur()funciona para más que la <input>etiqueta. Por ejemplo:

$('.form_wrapper').blur(function(){
   $(this).hide();
});