Como posso acionar uma função quando clico em qualquer lugar da minha página, exceto em um div ( id=menu_content
)?
Como posso acionar uma função quando clico em qualquer lugar da minha página, exceto em um div ( id=menu_content
)?
Respostas:
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 em menu_content
, bem como clicar em descendentes. Acho que o segundo if
é 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
});
tente isso
$('html').click(function() {
//your stuf
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
você também pode usar os eventos externos
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 id myNavbar
.
$('body').click(function(evt){
if(!$(evt.target).is('div#myNavbar li')) {
//event handling code
}
});
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();
}
});