Utilisez jQuery pour cacher une DIV lorsque l'utilisateur clique à l'extérieur de celui-ci

vous feriez mieux de prendre 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();
    });
});

vous pourriez vouloir vérifier la cible de l'événement de clic qui tire 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();
    }
  }
);

de plus, l'élément du corps peut ne pas inclure tout l'espace visuel indiqué dans le navigateur. Si vous remarquez que vos clics ne sont pas enregistrés, vous pouvez avoir besoin d'ajouter le gestionnaire de clics pour L'élément HTML à la place.

ce code détecte tout événement de clic sur la page et Cache ensuite l'élément #CONTAINER si et seulement si l'élément cliqué n'était pas l'élément #CONTAINER ni l'un de ses descendants.

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

Live DEMO

cocher la zone n'est pas dans l'élément visé ou dans son enfant

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

mise à JOUR:

jQuery arrêter la propagation 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();
});

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

mise à Jour de la solution:

• utiliser mouseenter et mouseleave à la place
• de hover utilisation événement en direct 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');
    }
});

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

démo en Live avec ESC "151960920 de" fonctionnalité

fonctionne à la fois de 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 vous assurer que votre élément est bien visible lorsque vous cliquez sur le document: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

ça ne marcherait pas?

$("body *").not(".form_wrapper").click(function() {

});

ou

$("body *:not(.form_wrapper)").click(function() {

});

Even sleaker:

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});

et pour les appareils tactiles comme L'IPAD et L'IPHONE, nous pouvons utiliser le code suivant

$(document).on('touchstart', function (event) {
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();
    }
});

voici un jsfiddle que j'ai trouvé sur un autre fil, fonctionne avec la touche esc aussi: http://jsfiddle.net/S5ftb/404

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

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

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })

Construit à partir de la réponse impressionnante de prc322.

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var 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();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

cela ajoute quelques choses...

1. placé dans une fonction avec un rappel avec" unlimited "args
2. a ajouté un appel à jquery .off () jumelé avec un espace de noms d'événements pour déballer l'Événement du document une fois qu'il a été lancé.
3. Inclus touchend pour la fonctionnalité mobile

j'espère que cela aidera quelqu'un!

au lieu d'écouter chaque clic sur le DOM pour cacher un élément spécifique, vous pouvez définir tabindex au parent <div> et écouter les événements focusout .

paramétrage tabindex fera en sorte que l'événement blur est allumé sur le <div> (normalement il ne serait pas).

donc votre HTML ressemblerait à:

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

et votre JS:

$('.form_wrapper').on('focusout', function(event){
    $('.form_wrapper').hide();
});

var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});

si vous avez des problèmes avec ios, mouseup ne fonctionne pas sur apple device.

ne mousedown /mouseup jquery dans le travail pour l'ipad?

j'utilise ceci:

$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });

 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

p est le nom de l'élément. Où l'on peut passer l'id ou le nom de classe ou d'élément aussi.

retournez false si vous cliquez sur .form_wrapper:

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

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

attacher un événement de clic aux éléments de niveau supérieur à l'extérieur de l'enveloppe du formulaire, par exemple:

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

cela fonctionnera également sur les appareils tactiles, assurez-vous juste de ne pas inclure un parent de .form_wrapper dans votre liste de sélecteurs.

$(document).ready(function() {
	$('.modal-container').on('click', function(e) {
	  if(e.target == $(this)[0]) {
		$(this).removeClass('active'); // or hide()
	  }
	});
});

.modal-container {
	display: none;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 999;
}

.modal-container.active {
    display: flex;  
}

.modal {
	width: 50%;
	height: auto;
	margin: 20px;
	padding: 20px;
	background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-container active">
	<div class="modal">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p>
	</div>
</div>

Je l'ai fait comme ceci:

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});

dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

je voulais aimer le plus-voté pour la suggestion, mais il n'a pas fonctionné pour moi.

cette méthode est presque la même mais a fonctionné pour moi. http://www.codesynthesis.co.uk/code-snippets/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it

(vient s'ajouter à la réponse de prc322.)

dans mon cas, j'utilise ce code pour cacher un menu de navigation qui apparaît lorsque l'utilisateur clique sur un onglet approprié. J'ai trouvé qu'il était utile d'ajouter une condition supplémentaire, que la cible de l'cliquer à l'extérieur du conteneur est pas un lien.

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!$("a").is(e.target) // if the target of the click isn't a link ...
        && !container.is(e.target) // ... or the container ...
        && container.has(e.target).length === 0) // ... or a descendant of the container
    {
        container.hide();
    }
});

C'est parce que certains des liens sur mon site ajouter du nouveau contenu à la page. Si ce nouveau contenu est ajouté en même temps que le menu de navigation disparaît, il pourrait être désorientant pour l'utilisateur.

var exclude_div = $("#ExcludedDiv");;  
$(document).click(function(e){
   if( !exclude_div.is( e.target ) )  // if target div is not the one you want to exclude then add the class hidden
        $(".myDiv1").addClass("hidden");  

}); 

VIOLON

en utilisant ce code, vous pouvez cacher autant d'éléments que vous voulez""

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})

tant de réponses, doit être un droit de passage pour en avoir ajouté une... Je n'ai pas vu un courant (jquery 3.1.1) réponses-donc:

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});

ce que vous pouvez faire est de lier un événement de clic au document qui masquera le dropdown si quelque chose en dehors du dropdown est cliqué, mais ne le cachera pas si quelque chose à l'intérieur du dropdown est cliqué, donc votre événement "show" (ou slidedown ou quoi que ce soit qui montre le dropdown)

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

puis en le cachant, déboutonnez l'événement de clic

$(document).unbind('click');