Question Utilisez jQuery pour masquer un DIV lorsque l'utilisateur clique en dehors de celui-ci


J'utilise ce code:

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

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

Et ce 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 quand on clique dessus.


855
2017-09-10 06:11


origine


Réponses:


Avait le même problème, est venu avec cette solution facile. Il fonctionne même de manière récursive:

$(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



Tu ferais mieux d'aller avec quelque chose comme ça:

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



Vous pouvez vérifier la cible de l'événement click qui se déclenche pour le corps au lieu de s'appuyer sur stopPropagation.

Quelque chose comme:

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

De plus, l'élément body peut ne pas inclure tout l'espace visuel affiché dans le navigateur. Si vous remarquez que vos clics ne s'inscrivent pas, vous devrez peut-être ajouter le gestionnaire de clics pour l'élément HTML.


64
2017-09-10 06:20



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

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

62
2018-05-09 20:13



Live DEMO

Vérifiez que la zone de clic ne se trouve pas dans l'élément ciblé ou dans son enfant

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

METTRE À JOUR:

La propagation d'arrêt jQuery est la meilleure solution

Live DEMO

$(".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



Mise à jour de la solution pour:

  • utiliser mouseenter et mouseleave à la place
  • de hover utilise la liaison d'événements en direct

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



Une solution sans jQuery pour la réponse la plus populaire:

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



Démonstration en direct avec ESC fonctionnalité

Fonctionne sur les deux Bureau et Mobile

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

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

Si dans certains cas vous devez être sûr que votre élément est vraiment visible lorsque vous cliquez sur le document: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();


7
2017-09-15 20:57