Pregunta 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 del DIV y cuando ya no funcionan cuando hago clic.


855
2017-09-10 06:11


origen


Respuestas:


Tenía el mismo problema, se le ocurrió esta solución fácil. Incluso funciona recursivo:

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

2261
2017-09-12 09:19



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

194
2017-09-10 06:23



Es posible que desee comprobar el objetivo del evento click que se activa 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 no puede incluir todo el espacio visual que se muestra en el navegador. Si nota que sus clics no se están registrando, puede que necesite agregar el controlador de clics para el elemento HTML.


64
2017-09-10 06:20



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

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

62
2018-05-09 20:13



Demo en vivo

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

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

ACTUALIZAR:

La propagación de jQuery stop 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();
});

22
2018-04-29 08:28



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

17
2017-09-10 06:39



Se actualizó la solución a:

  • use mouseenter y mouseleave en su lugar
  • de hover usa 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');
    }
});

15
2018-04-27 14:32



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


10
2017-07-27 12:40