Estou usando este código:
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
E este HTML :
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
O problema é que tenho links dentro div
e quando eles não funcionam mais quando clicados.
$('html')
ou$(document)
seria melhor que$('body')
Respostas:
Teve o mesmo problema, veio com esta solução fácil. Até funciona recursivamente:
fonte
$("YOUR CONTAINER SELECTOR").unbind( 'click', clickDocument );
logo ao lado.hide()
. Portantodocument
, não fique ouvindo cliques.$(document).on("mouseup.hideDocClick", function () { ... });
na função que abre o contêiner e$(document).off('.hideDocClick');
na função ocultar. Usando espaços para nome, não estou removendo outros possíveismouseup
ouvintes anexados ao documento.É melhor você ir com algo assim:
fonte
hover
manipulador de eventos, que abre muitas possibilidades.(function() { // ... code })();
Não me lembro do nome desse padrão, mas é super útil! Todas as suas variáveis declaradas residirão dentro da função e não poluirão o espaço para nome global.Esse código detecta qualquer evento de clique na página e oculta o
#CONTAINER
elemento se e somente se o elemento clicado não era o#CONTAINER
elemento nem um de seus descendentes.fonte
Convém verificar o destino do evento click que é acionado para o corpo em vez de confiar em stopPropagation.
Algo como:
Além disso, o elemento body pode não incluir todo o espaço visual mostrado no navegador. Se você perceber que seus cliques não estão sendo registrados, talvez seja necessário adicionar o manipulador de cliques para o elemento HTML.
fonte
e.stopPropagation();
, se você tem outro clique ouvinteform_wrapper
quando você clica em um de seus filhos, que não é o comportamento desejado. Use a resposta do prc322.Demonstração ao vivo
Verificar se a área de clique não está no elemento de destino ou é filho
ATUALIZAR:
A propagação de parada do jQuery é a melhor solução
Demonstração ao vivo
fonte
clicked
um. Caso contrário,stopPropagation
isso tornaria possível que vários menus suspensos fossem abertos ao mesmo tempo.fonte
Atualizou a solução para:
var mouseOverActiveElement = false;
fonte
.live
agora está obsoleto ; use em.on
vez disso.Uma solução sem jQuery para a resposta mais popular :
MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains
fonte
bind
não funciona. Você poderia consertar a função para fazê-la funcionar?Demonstração ao vivo com ESCfuncionalidade
Funciona em computadores e dispositivos móveis
Se, em algum caso, você precisar ter certeza de que seu elemento está realmente visível quando você clica no documento:
if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();
fonte
Algo assim não funcionaria?
ou
fonte
.form_wrapper
quando você clica nos filhos (entre outros problemas).Mesmo sapatilha:
fonte
.wrapper
onde você clica na página, e não é o que foi solicitado.Em vez de ouvir cada clique no DOM para ocultar um elemento específico, você pode definir
tabindex
o pai<div>
e ouvir osfocusout
eventos.A configuração
tabindex
garantirá que oblur
evento seja disparado no<div>
(normalmente não seria).Portanto, seu HTML se pareceria com:
E seu JS:
fonte
E para dispositivos Touch como IPAD e IPHONE, podemos usar o seguinte código
fonte
Aqui está um jsfiddle que encontrei em outro segmento, também funciona com a tecla esc: http://jsfiddle.net/S5ftb/404
fonte
Construído a partir da resposta impressionante do prc322.
Isso adiciona algumas coisas ...
Espero que isso ajude alguém!
fonte
se você tiver problemas com o ios, o mouseup não está funcionando no dispositivo apple.
mousedown / mouseup no jquery funciona para o ipad?
Eu uso isso:
fonte
(Apenas adicionando à resposta do prc322.)
No meu caso, estou usando esse código para ocultar um menu de navegação que aparece quando o usuário clica em uma guia apropriada. Achei útil adicionar uma condição extra, de que o alvo do clique fora do contêiner não é um link.
Isso ocorre porque alguns dos links do meu site adicionam novo conteúdo à página. Se esse novo conteúdo for adicionado ao mesmo tempo que o menu de navegação desaparecer, pode ser desorientador para o usuário.
fonte
Tantas respostas, deve ser um direito de passagem para ter adicionado uma ... Eu não vi respostas atuais (jQuery 3.1.1) - então:
fonte
fonte
p
é o nome do elemento Onde se pode passar o ID ou o nome da classe ou do elemento também.fonte
Retorne false se você clicar em .form_wrapper:
fonte
Anexe um evento click aos elementos de nível superior fora do wrapper de formulário, por exemplo:
Isso também funcionará em dispositivos sensíveis ao toque, mas não inclua um pai de .form_wrapper na sua lista de seletores.
fonte
FIDDLE
fonte
fonte
Copiado de https://sdtuts.com/click-on-not-specified-element/
Demonstração ao vivo http://demos.sdtuts.com/click-on-specified-element
fonte
eu fiz assim:
fonte
fonte
Ao usar esse código, você pode ocultar quantos itens quiser
fonte
O que você pode fazer é vincular um evento de clique ao documento que ocultará a lista suspensa se algo fora da lista suspensa for clicado, mas não a ocultará se algo dentro da lista suspensa for clicado. mostra a lista suspensa)
Ao ocultá-lo, desvincule o evento click
fonte
De acordo com os documentos ,
.blur()
funciona para mais do que a<input>
tag. Por exemplo:fonte
div
nunca desfocamos - os eventos de desfocagem nem podem ser refletidos pelos filhos. Por fim, mesmo que as opções acima não fossem verdadeiras, isso só funcionaria se você tivesse certeza de que.form_wrapper
estava em foco antes de o usuário clicar nela.