Use o jQuery para ocultar um DIV quando o usuário clicar fora dele

Estou usando este código:

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

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

E este HTML :

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

O problema é que tenho links dentro dive quando eles não funcionam mais quando clicados.

Teve o mesmo problema, veio com esta solução fácil. Até funciona recursivamente:

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

É melhor você ir com algo assim:

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

Esse código detecta qualquer evento de clique na página e oculta o #CONTAINERelemento se e somente se o elemento clicado não era o #CONTAINERelemento nem um de seus descendentes.

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

Convém verificar o destino do evento click que é acionado para o corpo em vez de confiar em stopPropagation.

Algo como:

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

Além disso, o elemento body pode não incluir todo o espaço visual mostrado no navegador. Se você perceber que seus cliques não estão sendo registrados, talvez seja necessário adicionar o manipulador de cliques para o elemento HTML.

Demonstração ao vivo

Verificar se a área de clique não está no elemento de destino ou é filho

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

ATUALIZAR:

A propagação de parada do jQuery é a melhor solução

Demonstração ao vivo

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

Atualizou a solução para:

• use mouseenter e mouseleave
• de pairar usar ligação ao evento ao vivo

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

Uma solução sem jQuery para a resposta mais popular :

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

Demonstração ao vivo com ESCfuncionalidade

Funciona em computadores e dispositivos móveis

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

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

_{Se, em algum caso, você precisar ter certeza de que seu elemento está realmente visível quando você clica no documento: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

Algo assim não funcionaria?

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

});

ou

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

});

Mesmo sapatilha:

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

Em vez de ouvir cada clique no DOM para ocultar um elemento específico, você pode definir tabindexo pai <div>e ouvir os focusouteventos.

A configuração tabindexgarantirá que o blurevento seja disparado no <div>(normalmente não seria).

Portanto, seu HTML se pareceria com:

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

E seu JS:

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

E para dispositivos Touch como IPAD e IPHONE, podemos usar o seguinte código

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

Aqui está um jsfiddle que encontrei em outro segmento, também funciona com a tecla 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()
      }
    })

Construído a partir da resposta impressionante do 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);
    }
  });
}

Isso adiciona algumas coisas ...

1. Colocado em uma função com retorno de chamada com argumentos "ilimitados"
2. Adicionada uma chamada ao .off () do jquery emparelhado com um espaço para nome do evento para desvincular o evento do documento após a execução.
3. Touchend incluído para funcionalidade móvel

Espero que isso ajude alguém!

se você tiver problemas com o ios, o mouseup não está funcionando no dispositivo apple.

mousedown / mouseup no jquery funciona para o ipad?

Eu uso isso:

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

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

(Apenas adicionando à resposta do prc322.)

No meu caso, estou usando esse código para ocultar um menu de navegação que aparece quando o usuário clica em uma guia apropriada. Achei útil adicionar uma condição extra, de que o alvo do clique fora do contêiner não é um 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();
    }
});

Isso ocorre porque alguns dos links do meu site adicionam novo conteúdo à página. Se esse novo conteúdo for adicionado ao mesmo tempo que o menu de navegação desaparecer, pode ser desorientador para o usuário.

Tantas respostas, deve ser um direito de passagem para ter adicionado uma ... Eu não vi respostas atuais (jQuery 3.1.1) - então:

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

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

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

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

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

pé o nome do elemento Onde se pode passar o ID ou o nome da classe ou do elemento também.

Retorne false se você clicar em .form_wrapper:

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

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

Anexe um evento click aos elementos de nível superior fora do wrapper de formulário, por exemplo:

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

Isso também funcionará em dispositivos sensíveis ao toque, mas não inclua um pai de .form_wrapper na sua lista de seletores.

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

Copiado de https://sdtuts.com/click-on-not-specified-element/

Demonstração ao vivo http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {
    var is_specified_clicked;
    $(".specified_element").click(function () {
        is_specified_clicked = true;
        setTimeout(function () {
            is_specified_clicked = false;
        }, 200);
    })
    $("*").click(function () {
        if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
            $(".event_result").text("you were clicked on specified element");
        } else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
            $(".event_result").text("you were clicked not on specified element");
        }
    })
})

eu fiz assim:

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

Ao usar esse código, você pode ocultar quantos itens quiser

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

O que você pode fazer é vincular um evento de clique ao documento que ocultará a lista suspensa se algo fora da lista suspensa for clicado, mas não a ocultará se algo dentro da lista suspensa for clicado. mostra a lista suspensa)

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

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

    });

Ao ocultá-lo, desvincule o evento click

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

De acordo com os documentos , .blur()funciona para mais do que a <input>tag. Por exemplo:

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