Użyj jQuery, aby ukryć DIV, gdy użytkownik kliknie poza nim

Lepiej zrób coś takiego:

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

Możesz chcieć sprawdzić cel zdarzenia click, które zostanie wywołane dla ciała, zamiast polegać na stopropagacji.

Coś w stylu:

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

Ponadto element ciała może nie obejmować całej przestrzeni wizualnej wyświetlanej w przeglądarce. Jeśli zauważysz, że Twoje kliknięcia nie są rejestrowane, może być konieczne dodanie obsługi kliknięć dla elementu HTML.

Ten kod wykrywa każde zdarzenie kliknięcia na stronie, a następnie ukrywa element {[1] } wtedy i tylko wtedy, gdy element kliknięty nie był ani elementem #CONTAINER, ani jednym z jego potomków.

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

Live DEMO

Zaznacz obszar kliknięcia nie znajduje się w elemencie docelowym ani w jego potomku

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

UPDATE:

JQuery stop to najlepsze rozwiązanie

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

Zaktualizowano rozwiązanie do:

• użyj mouseenter i mouseleave zamiast
• hover użyj wiązania zdarzeń na żywo

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

Rozwiązanie bez jQuery dla najpopularniejszej odpowiedzi :

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

Demo na żywo z funkcjonalnością ESC

Działa zarówno na Desktop i Mobile

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

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

_{jeśli w niektórych przypadkach musisz mieć pewność, że twój element jest naprawdę widoczny podczas klikania w dokument: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

Czy coś takiego nie zadziała?

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

});

Lub

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

});

Even sleaker:

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

I dla urządzeń dotykowych, takich jak IPAD i IPHONE, możemy użyć następującego kodu

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

Oto jsfiddle, który znalazłem w innym wątku, działa również z kluczem esc: 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()
      }
    })

Zbudowany z niesamowitej odpowiedzi 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);
    }
  });
}

1. umieszczony wewnątrz funkcji z wywołaniem zwrotnym z" nieograniczonym " args
2. dodano wywołanie do jquery .off() sparowana z przestrzenią nazw zdarzeń w celu odłączenia zdarzenia od dokumentu po jego uruchomieniu.
3. dołączony touchend dla funkcji mobilnych

Zamiast słuchać każdego kliknięcia na DOM, aby ukryć jeden konkretny element, możesz ustawić tabindex na rodzica <div> i słuchać zdarzeń focusout.

Ustawienie tabindex upewni się, że zdarzenie blur zostanie wywołane na <div> (normalnie nie).

Więc twój HTML wyglądałby tak:

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

I twoje 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");
}
});

Jeśli masz problemy z ios, mouseup nie działa na urządzeniu apple.

Czy mousedown / mouseup w jquery działa na iPadzie?

Używam tego:

$(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 jest nazwą elementu. Gdzie można również podać id, klasę lub Nazwę Elementu.

Zwróć false po kliknięciu .form_wrapper:

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

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

Dołącz Zdarzenie kliknięcia do elementów najwyższego poziomu poza opakowaniem formularza, na przykład:

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

To będzie również działać na urządzeniach dotykowych, tylko upewnij się, że nie zawierają rodzica.form_wrapper na liście selektorów.

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

Zrobiłem to tak:

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>

Chciałem najbardziej polubić-głosowałem za sugestią, ale mi nie wyszło.

Ta metoda jest prawie taka sama, ale działa dla mnie. http://www.codesynthesis.co.uk/code-snippets/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it

(dodaję tylko do odpowiedzi prc322.)

W moim przypadku używam tego kodu, aby ukryć menu nawigacyjne, które pojawia się, gdy użytkownik kliknie odpowiednią kartę. Okazało się, że warto dodać dodatkowy warunek, że celem kliknięcia poza kontenerem jest , a nie link.

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

Dzieje się tak dlatego, że niektóre linki na mojej stronie dodają nową treść do strony. Jeśli ta nowa zawartość zostanie dodana w tym samym czasie, że menu nawigacji znika, może to być dezorientujące dla użytkownika.

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");  

}); 

FIDDLE

Używając tego kodu możesz ukryć tyle elementów, ile chcesz

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

Tak wiele odpowiedzi, musi być prawem przejścia, aby je dodać... Nie widziałem aktualnych odpowiedzi (jQuery 3.1.1) - więc:

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

Możesz powiązać Zdarzenie kliknięcia z dokumentem, które ukryje listę rozwijaną, jeśli klikniesz coś spoza listy rozwijanej, ale nie ukryje jej, jeśli klikniesz coś z listy rozwijanej, więc twoje Zdarzenie "Pokaż" (lub slidedown lub cokolwiek, co wyświetla listę rozwijaną)

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

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

    });

Następnie podczas ukrywania, odłącz Zdarzenie click

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