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

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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