jQuery clique em qualquer lugar da página, exceto em 1 div

88

Como posso acionar uma função quando clico em qualquer lugar da minha página, exceto em um div ( id=menu_content)?

Vincent Roye
fonte

Respostas:

142

Você pode aplicar clickon bodyde documento e cancelar clicko processamento se o clickevento é gerado por div com id menu_content, Isto irá ligar evento para único elemento e salvar ligação de clickcom cada elemento, excetomenu_content

$('body').click(function(evt){    
       if(evt.target.id == "menu_content")
          return;
       //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
       if($(evt.target).closest('#menu_content').length)
          return;             

      //Do processing of click event here for every element except with id menu_content

});
Adil
fonte
3
que tal filhos descendentes no DIV?
iKamy
2
Podemos usar o mais próximo para verificar se a origem do evento tem qualquer ancestral com id menu_content como if ($ (evt.target) .closest ('# menu_content'). Length) retrun; verifique minha resposta atualizada.
Adil
Uma vez que closestcomeça com o elemento atual, ele lida com clicar em menu_content, bem como clicar em descendentes. Acho que o segundo ifé tudo que você precisa.
goodeye
50

Consulte a documentação do jQuery Event Target . Usando a propriedade target do objeto de evento, você pode detectar onde o clique se originou dentro do #menu_contentelemento e, em caso afirmativo, encerrar o manipulador de clique antecipadamente. Você terá que .closest()lidar com casos em que o clique teve origem em um descendente de #menu_content.

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

    // Check if click was triggered on or within #menu_content
    if( $(e.target).closest("#menu_content").length > 0 ) {
        return false;
    }

    // Otherwise
    // trigger your click function
});
Nbrooks
fonte
42

tente isso

 $('html').click(function() {
 //your stuf
 });

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

você também pode usar os eventos externos

Database_Query
fonte
5
Isso funciona, mas o uso de event.stopPropagation () pode ter efeitos colaterais em outro JS contido no pai.
Edd Smith
9

Eu sei que esta pergunta foi respondida, e todas as respostas são boas. Mas eu gostaria de acrescentar meus dois centavos a essa pergunta para pessoas que têm problemas semelhantes (mas não exatamente os mesmos).

De uma forma mais geral, podemos fazer algo assim:

$('body').click(function(evt){    
    if(!$(evt.target).is('#menu_content')) {
        //event handling code
    }
});

Desta forma, podemos tratar não apenas eventos disparados por qualquer coisa, exceto elemento com id, menu_contentmas também eventos que são disparados por qualquer coisa, exceto qualquer elemento que possamos selecionar usando seletores CSS.

Por exemplo, no fragmento de código a seguir, estou obtendo eventos disparados por qualquer elemento, exceto todos os <li>elementos que são descendentes do elemento div com id myNavbar.

$('body').click(function(evt){    
    if(!$(evt.target).is('div#myNavbar li')) {
        //event handling code
    }
});
gandalf
fonte
1
Eu só queria dizer que esse método funcionou bem para mim, usei .is () e também .closest () com um seletor de css que não tinha ID, mas apenas algumas classes, obrigado
relipse
7

aqui está o que eu fiz. queria ter certeza de que poderia clicar em qualquer uma das crianças no meu selecionador de datas sem fechá-lo.

$('html').click(function(e){
    if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
        // clicked menu content or children
    } else {
        // didnt click menu content
    }
});

meu código real:

$('html').click(function(e){
    if (e.target.id != 'datepicker'
        && $(e.target).parents('#datepicker').length == 0
        && !$(e.target).hasClass('datepicker')
    ) {
        $('#datepicker').remove();
    }
});
Nate
fonte
Bela versão incluindo cliques nas crianças e na turma, deve ser a resposta escolhida!
Em