Como posso acionar uma função quando clico em qualquer lugar da minha página, exceto em um div ( id=menu_content
)?
88
Você pode aplicar click
on body
de documento e cancelar click
o processamento se o click
evento é gerado por div com id menu_content
, Isto irá ligar evento para único elemento e salvar ligação de click
com 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
});
closest
começa com o elemento atual, ele lida com clicar emmenu_content
, bem como clicar em descendentes. Acho que o segundoif
é tudo que você precisa.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_content
elemento 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 });
fonte
tente isso
$('html').click(function() { //your stuf }); $('#menucontainer').click(function(event){ event.stopPropagation(); });
você também pode usar os eventos externos
fonte
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_content
mas 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 idmyNavbar
.$('body').click(function(evt){ if(!$(evt.target).is('div#myNavbar li')) { //event handling code } });
fonte
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(); } });
fonte