jQuery: Masquer le menu contextuel si sur détectés ailleurs

Question

Je suis en train d'essayer de cacher une div si l'utilisateur clique n'importe où, MAIS les pop-up OU c'est les enfants. C'est le code que j'ai pour l'instant:

$("body").click(function(){
    var $target = $(event.target);
    if(!$target.is(".popup") || !$target.is(".popup").children()){
        $("body").find(".popup").fadeOut().removeClass('active');
    }
});

Il travaille pour la .popup div, mais si l'un de ses enfants est cliqué, il le cache de toute façon.

Answer 1

Vous ne pouviez vraiment simplifier un peu je pense:

// If an event gets to the body
$("body").click(function(){
  $(".popup").fadeOut().removeClass("active");
});

// Prevent events from getting pass .popup
$(".popup").click(function(e){
  e.stopPropagation();
});

En cliquant sur le pop-up, ou un de ses enfants, va provoquer la propagation d'arrêter avant qu'il n'atteigne le corps.

Démonstration de l'arrêt de l'événement-propagation: http://jsbin.com/ofeso3/edit

Answer 2

Je suis à l'aide d'un code très simple pour cela :-

$(document).click(function(e){

   if($(e.target).closest('#popupdivID').length != 0) return false;
   $('#popupdivID').hide();
});

c'est aussi utile pour le menu déroulant. si vous avez cliquez sur le menu déroulant et l'affichage de la liste et cliquez ensuite sur le reste du document, puis cette liste doit être fermé. J'ai utilisé le même code pour cela aussi.

Merci!!

Answer 3

Faire cela:

$(document).click(function (e) {
    // show_alerts is the class of the link to display the popup
    if (!$(e.target).parents().andSelf().is('.show_alerts')) {
        // hide your popup
    }
});

exemple: http://jsfiddle.net/Acf3F/

Answer 4

Balayer vers le haut sur votre logique booléenne! :)

if(!$target.is(".popup") && !$target.parents().is(".popup"))

Answer 5

Nous sommes à l'aide de cette option pour afficher un menu contextuel sur clic et puis cacher une fois que vous cliquez sur le même bouton nouveau ou cliquez sur l'extérieur.

function togglePopup(){
  var selector = '#popup',
    $popup = $(selector),
    callback = function(e) {
      if (!$(e.target).parents().andSelf().is(selector)) {
        $popup.hide();
        $(document).off('click', callback);
      }
    };

  $popup.toggle();
  if ($popup.is(':visible')) {
    $(document).on('click', callback);
  }
  return false;
}