Gostaria de saber se esta é a maneira correta de ocultar elementos visíveis quando clicados em qualquer lugar da página.
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
O elemento (div, span, etc.) não deve desaparecer quando um evento de clique ocorre dentro dos limites do elemento.
Respostas:
Se eu entendi, você deseja ocultar uma div ao clicar em qualquer lugar que não seja a div, e se clicar sobre a div, NÃO deve ser fechada. Você pode fazer isso com este código:
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
Isso vincula o clique à página inteira, mas se você clicar no div em questão, ele cancelará o evento click.
.myDivelemento. Por exemplo, se você tiver uma lista suspensa selecionada dentro .myDiv. Quando você clica no botão de seleção, ele pensa que está clicando fora da caixa.
Tente isto
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});Eu uso o nome da classe em vez do ID , porque no asp.net você precisa se preocupar com as coisas extras que o .net atribui ao id
EDIT- Como você adicionou uma outra peça, funcionaria assim:
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});A partir do jQuery 1.7, há uma nova maneira de lidar com eventos. Pensei em responder aqui apenas para demonstrar como posso fazer isso da maneira "nova". Caso contrário, recomendo que você leia os documentos do jQuery para o método "on" .
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);Aqui, estamos abusando dos seletores do jQuery e da agitação de eventos. Observe que eu limpo o manipulador de eventos posteriormente. Você pode automatizar esse comportamento com $('.container').one( consulte: docs ), mas porque precisamos fazer condicionais dentro do manipulador que não se aplica aqui.
Este exemplo de código a seguir parece funcionar melhor para mim. Embora você possa usar 'return false', que interrompe toda a manipulação desse evento para a div ou qualquer um de seus filhos. Se você deseja ter controles na div pop-up (um formulário de login pop-up, por exemplo), use event.stopPropogation ().
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>Obrigado, Thomas. Eu sou novo no JS e tenho procurado loucamente por uma solução para o meu problema. O seu ajudou.
Eu usei o jquery para criar uma caixa de login que desliza para baixo. Para uma melhor experiência do usuário, eu desejei fazer a caixa desaparecer quando o usuário clica em algum lugar, exceto na caixa. Estou um pouco envergonhado por usar cerca de quatro horas consertando isso. Mas ei, eu sou novo no JS.
Talvez meu código possa ajudar alguém:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>O que você também pode fazer é:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});Se o seu destino não for um div, oculte-o, verificando se o seu comprimento é igual a zero.
Eu fiz o abaixo. Pensou em compartilhar para que outra pessoa também pudesse se beneficiar.
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});Deixe-me saber se eu posso ajudar alguém sobre isso.
div#newButtonDivnão for clicado. Eu recomendaria que você remova o segundo .click()na linha 4 (se fizer isso, lembre-se de remover as chaves de fechamento, parênteses e ponto e vírgula - linha 9).
Tente o seguinte:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});Outra maneira de ocultar a div do contêiner quando um clique ocorre em um elemento não filho;
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
}); $(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ( $(e.target).closest('#suggest_input').length ) {
$(".suggest_div").show();
}else if ( ! $(e.target).closest('.suggest_container').length ) {
$('.suggest_div').hide();
}
});Aqui #suggest_input in é o nome da caixa de texto e .suggest_container é o nome da classe ul e .suggest_div é o principal elemento div da minha sugestão automática.
esse código é para ocultar os elementos div clicando em qualquer lugar na tela. Antes de fazer tudo, entenda o código e copie-o ...
Tente isso, está funcionando perfeitamente para mim.
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});mas você também precisa ter em mente essas coisas. http://css-tricks.com/dangers-stopping-event-propagation/
Aqui está uma solução CSS / JS pequena, baseada na resposta de Sandeep Pal:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});Experimente clicando na caixa de seleção e depois fora do menu:
Isso não funciona - oculta o .myDIV quando você clica dentro dele.
$('.openDiv').click(function(e) {
$('.myDiv').show();
e.stopPropagation();
})
$(document).click(function(){
$('.myDiv').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>Apenas duas pequenas melhorias nas sugestões acima:
interrompa a propagação no evento que desencadeou isso, assumindo que é um clique
jQuery(thelink).click(function(e){
jQuery(thepop).show();
// bind the hide controls
var jpop=jQuery(thepop);
jQuery(document).bind("click.hidethepop", function() {
jpop.hide();
// unbind the hide controls
jQuery(document).unbind("click.hidethepop");
});
// dont close thepop when you click on thepop
jQuery(thepop).click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>$( "element" ).focusout(function() {
//your code on element
})$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});Solução simples: oculte um elemento em um evento de clique em qualquer lugar fora de algum elemento específico.
$(document).on('click', function () {
$('.element').hide();
});
//element will not Hide on click some specific control inside document
$('.control-1').on('click', function (e) {
e.stopPropagation();
});