Eu tenho alguns menus HTML, que eu mostro completamente quando um usuário clica na cabeça desses menus. Eu gostaria de esconder estes elementos quando o usuário clica fora dos menus' área.
É possível algo assim com jQuery?
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
NOTA: A utilização do
stopEventPropagation()
é algo que deve ser evitado, pois quebra o fluxo normal de eventos no DOM. Veja este artigo para mais informações. Considere utilizar este método em vez disso
Anexe um evento de clique no corpo do documento que fecha a janela. Anexe um evento de clique separado ao recipiente que pára a propagação para o corpo do documento.
$(window).click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
Tenho uma aplicação que funciona de forma semelhante ao exemplo do Eran, excepto que anexei o evento do clique ao corpo quando abri o menu... Mais ou menos assim:
$('#menucontainer').click(function(event) {
$('html').one('click',function() {
// Hide the menus
});
event.stopPropagation();
});
Mais informações sobre jQuery's uma()
função
Verifique o alvo de evento de clique da janela (deve propagar-se para a janela, desde que não seja capturado em nenhum outro lugar), e certifique-se de que não é nenhum dos elementos do menu. Se não for, então você está fora do seu menu.
Ou verifique a posição do clique, e veja se ele está contido dentro da área do menu.