942 votes

Utilisation de jQuery pour cacher une DIV lorsque l'utilisateur clique en dehors de ça

Je suis en utilisant ce code:

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

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

Et ce code HTML:

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

Le problème est que j'ai des liens à l'intérieur de la DIV et quand ils ne fonctionnent plus lorsque l'utilisateur clique dessus.

2437voto

prc322 Points 8799

Eu le même problème, est venu avec cette solution de facilité. C'est même le travail récursive:

$(document).mouseup(function (e)
{
    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();
    }
});

200voto

Makram Saleh Points 4865

Vous feriez mieux d'aller avec quelque chose comme ceci:

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

81voto

Iscariot Points 1124

Ce code détecte un événement de clic sur la page puis se cache l' #CONTAINER élément si et seulement si l'élément cliqué n'était ni l' #CONTAINER élément ni l'un de ses descendants.

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

73voto

David Andres Points 13569

Vous pourriez vouloir vérifier la cible de l'événement click qui se déclenche pour le corps au lieu de compter sur stopPropagation.

Quelque chose comme:

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

Aussi, l'élément de corps peut ne pas inclure la totalité de l'espace visuel affiche dans le navigateur. Si vous remarquez que vos clics ne sont pas de l'inscription, vous devrez peut-être ajouter le gestionnaire d'événements click pour l'élément HTML à la place.

17voto

benvds Points 964

Mise à jour de la solution:

  • utilisation mouseenter et mouseleave au lieu
  • de passez en direct de l'événement de liaison

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X