8

Preciso que ao clicar fora de uma div (é uma 'telinha' de cadastro), a mesma se feche.

Que seletor eu deveria usar para que clicando em qualquer parte fora da div essa div se feche?

$(????).on("click", function(){
    $('div').hide();  
});

Se houver clique em qualquer parte ou elemento da div não poderá fechar pois o usuário estará efetuando o preenchimento dos dados.

3 Respostas 3

11

Você pode associar o evento em um elemento mais externo, por exemplo o body, e dentro do evento verificar qual é o target do evento.

Se o target for a DIV que você quer excluir do evento de click, então usando um if não faça nada neste caso.

javascript

$(function() {
    var div = $("#div"); // seleciona a div específica
    $("body").on("click", function (e) {
        if (div.has(e.target).length || e.target == div[0])
            return;

        alert("Você clicou fora da div!");
    });
})

jsfiddle - excluindo 1 elemento do evento

Excluindo múltiplas áreas do evento

Usando closest como indicado por @mgibsonbr fica ainda mais fácil estender o conceito: por exemplo, quando se quer excluir múltiplas áreas do evento:

jsfiddle - excluindo vários elementos do evento

4
  • Eu teria que verificar também todos os elementos dentro da div. Ou estou enganado?
    – Joao Paulo
    7/03/2014 às 21:26
  • Você vai ter que detectar se o target é a própria div ou se possui a div como ancestral... vou criar um fiddle de exemplo. 7/03/2014 às 21:29
  • 3
    Creio que closest pode te ajudar nisso. Basta usar o seletor da div desejada como argumento; se retornar mais de zero resultados, é porque o elemento está dentro da div.
    – mgibsonbr
    7/03/2014 às 21:31
  • 2
    @mgibsonbr: com closest fica ainda mais flexível... no meu exemplo usei has... mas se tivesse que excluir múltiplos elementos do evento, o closest ajuda muito. 7/03/2014 às 21:54
2

Você pode adicionar o evento click no document disparando para todo a página.

Em um if dentro do click verificar qual o target do local clicado, se o ID for igual o da div dê um return false, caso contrário execute o hide.

Tem uma pegadinha, precisa ser verificado se o elemento $(e.target) é filho do elemento que não deve ter o evento click disparado.

$(document).on("click", function (e) {
    var obj = 'item', id = $(e.target).attr('id');
    if (id==obj) return;
    if ($("#"+obj+" #"+id).length > 0) return;
    $("#"+obj).hide();
});

Olhe o exemplo no jsfiddle

2
  • Funciona para o problema na pergunta, mas se li bem o código, se existir um evento de click num elemento dentro do elemento alvo, esse evento não vai disparar.
    – Zuul
    8/03/2014 às 0:15
  • pra mim funcionou jsfiddle vc tem algum exemplo de como não funcionaria? 8/03/2014 às 9:29
0

Quando precisamos fazer alguma coisa inúmeras vezes, talvez valha a pena criar uma extensão em jQuerypara poder resolver esse problema.

Eu fiz da seguinte forma:

(function ( $ ) {

    $.fn.clickOut = function (callback) {

        var that = this;

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

            if ( $(e.target).closest(that).size() > 0) {

                return;
            }

            $.isFunction(callback) && $.proxy(callback, that)(e);
        });
    }

})( jQuery )

Aí quando quero que determinado elemento seja fechado apenas quando se clica fora, faço da seguinte forma:

$('.fecha_quando_clica_fora').clickOut(function()
{
    $(this).hide()
});

Veja isso no JSFIDDLE

1
  • Atualização A pergunta é de 2014. Atualmente você pode usar a pseudoclasse body:not('div')
    – Maujor
    20/12/2018 às 21:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .