Como ocultar um elemento em um evento de clique em qualquer lugar fora do elemento?

121

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.

jquery events event-bubbling Franek
fonte

204

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.

Jeremy B.
fonte

1

Isso funciona bem ... mas quando clico no botão que chama o pop-up, o pop-up aparece e depois desaparece imediatamente. O que fazer para isso, pois o documento está executando duas ações por vez. para chamar o pop-up no corpo clique e para fadeOut o popup em bodyClick

Veer Shrivastav

@VeerShrivastav o mesmo acontece aqui. e.stopPropagation (); irá parar todos os manipuladores de cliques

brunodd 31/03

Isso NÃO funcionará no Safari se você tiver outros elementos dentro do .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.

CodeGodie

24

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

  });
});

TStamper
fonte

22

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.

Ben Taylor
fonte

13

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>

fonte

6

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>

Tommy
fonte

5

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.

Sandeep Pal
fonte

5

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.

foxybagga
fonte

Ótimo código e não é executado se 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).

aullah

4

Tente o seguinte:

 $(document).mouseup(function (e) {
    var div = $("#yourdivid");
    if (!div.is(e.target) && div.has(e.target).length === 0) 
    {
       div.hide();
     }
    });

Nalan Madheswaran
fonte

3

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();
    }
});

Renato Gama
fonte

3

  $(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 ...

Shaikh Arbaaz
fonte

2

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();
    }
});

Hassan Sardar
fonte

2

$('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/

Muhammad Tahir
fonte

2

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:

https://jsfiddle.net/qo90txr8/

Bjoerg
fonte

1

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>

Franek
fonte

então você quer que o div mostre para mostrar quando o link é colocado, tire essa e.stopPropa .. de lá e siga minha opção

#

1

Apenas duas pequenas melhorias nas sugestões acima:

desvincule o document.click quando terminar

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();
});

commonpike
fonte

1

$(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>

Expandir snippet

Ehsan KHAN
fonte

0

$( "element" ).focusout(function() {
    //your code on element
})

Jafar Choupan
fonte

5

Embora esse código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem.

Shree

-1

$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});

mohammad gitipasand
fonte

-1

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();
            });

Super Model
fonte

Como ocultar um elemento em um evento de clique em qualquer lugar fora do elemento?

Respostas: