Используйте jQuery, чтобы скрыть DIV, когда пользователь нажимает за его пределами

Вам лучше пойти с чем-то вроде этого:

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

Возможно, вы захотите проверить цель события клика, который срабатывает для тела, вместо того, чтобы полагаться на stopPropagation.

Что-то вроде:

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

Кроме того, элемент body может не включать все видимое пространство, отображаемое в браузере. Если вы заметили, что ваши клики не регистрируются, вам может потребоваться добавить обработчик кликов для HTML-элемента.

Этот код обнаруживает любое событие клика на странице, а затем скрывает элемент #CONTAINER тогда и только тогда, когда элемент, нажатый, не был ни элементом #CONTAINER, ни одним из его потомков.

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

Live DEMO

Проверить область клика не в целевом элементе или в нем дочерний

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

UPDATE:

jQuery прекращение распространения - лучшее решение

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

Обновлено решение:

• используйте mouseenter и mouseleave вместо
• привязки привязки к действию в реальном времени

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

Решение без jQuery для самого популярного ответа:

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

Живая демонстрация с ESC функциональностью

Работает как на Настольном и мобильном

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

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

_{Если в некоторых случаях вам нужно убедиться, что ваш элемент действительно отображается, когда вы делаете клики по документу: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

Не было бы такого, как эта работа?

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

});

или

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

});

Построен для превосходного ответа 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);
    }
  });
}

Это добавляет пару вещей...

• Размещается внутри функции с обратным вызовом с "неограниченными" аргументами
• Добавлен вызов jquery.off() в паре с пространством имен событий, чтобы отменить событие из документа после его запуска.
• Включено касание для мобильных функций.

Надеюсь, это поможет кому-то!

Здесь jsfiddle, который я нашел в другом потоке, также работает с ключом 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()
      }
    })

Даже омыватель:

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

А для устройств Touch, таких как IPAD и IPHONE, мы можем использовать следующий код

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

Вместо того, чтобы прослушивать каждый щелчок по DOM, чтобы скрыть один конкретный элемент, вы можете установить tabindex в родительский <div> и прослушать события focusout.

Настройка tabindex гарантирует, что событие blur запущено на <div> (обычно это не так).

Итак, ваш HTML будет выглядеть так:

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

И ваш JS:

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

Возвращает false, если вы нажмете на .form_wrapper:

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

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

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

p - это имя элемента. Там, где можно передать идентификатор или имя класса или элемента.

Если у вас проблемы с ios, mouseup не работает на яблочном устройстве.

делает mousedown/mouseup в jquery для ipad?

i использую это:

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

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

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

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

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

Используя этот код, вы можете скрыть столько элементов, сколько хотите

var boxArray = ["first element id","second element id","nth element 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';
    }
   }
})

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

(Просто добавьте ответ prc322.)

В моем случае я использую этот код, чтобы скрыть навигационное меню, которое появляется, когда пользователь нажимает соответствующую вкладку. Я нашел полезным добавить дополнительное условие, что цель клика за пределами контейнера не является ссылкой.

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

Это связано с тем, что некоторые ссылки на моем сайте добавляют новый контент на страницу. Если этот новый контент добавляется одновременно с исчезновением меню навигации, он может быть дезориентирован для пользователя.

Мне хотелось понравиться самому проголосовавшему за предложение, но это не сработало для меня.

Этот метод почти такой же, но работал у меня. http://www.codesynthesis.co.uk/code-snippets/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it

<!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>

Прикрепите элемент click к элементам верхнего уровня вне оболочки формы, например:

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

Это также будет работать на сенсорных устройствах, просто убедитесь, что вы не включили родительский элемент .form_wrapper в свой список селекторов.

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

я сделал это так:

var close = true;

$(function () {

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

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


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

});

Переключение для обычных и сенсорных устройств

Я прочитал несколько ответов здесь некоторое время назад и создал некоторый код, который я использую для div, который функционирует как всплывающие пузырьки.

$('#openPopupBubble').click(function(){
    $('#popupBubble').toggle();

    if($('#popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($('#openPopupBubble').is(e.target) || $('#openPopupBubble').find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$('#popupBubble').find('*').is(e.target)){
                $('#popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});

Вы также можете сделать это более абстрактным с помощью классов и выбрать правильный всплывающий пузырь на основе кнопки, которая вызвала событие click.

$('body').on('click', '.openPopupBubble', function(){
    $(this).next('.popupBubble').toggle();

    if($(this).next('.popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($(this).is(e.target) || $(this).find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$(this).next('.popupBubble').find('*').is(e.target)){
                $(this).next('.popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});

Что вы можете сделать, это привязать событие клика к документу, которое скроет раскрывающийся список, если щелкнуть что-либо за пределами выпадающего списка, но не скроет его, если щелкнуто что-то внутри выпадающего списка, поэтому ваше событие "показать" (или slidedown или что-то, что показывает выпадающее меню)

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

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

    });

Затем, скрывая его, отвяжите событие click

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

В соответствии с документами .blur() работает больше, чем тег <input>. Например:

$('.form_wrapper').blur(function(){
   $(this).hide();
});

$(document).ready(function() {

$('.headings').click(function () {$('#sub1').css("display",""); });
$('.headings').click(function () {return false;});
$('#sub1').click(function () {return false;});
$('body').click(function () {$('#sub1').css("display","none");

})});

Я думаю, что это может быть намного проще. Я сделал это так:

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