jQuery hide element lorsque cliqué n'importe où sur la page

je voudrais savoir si c'est la bonne façon de cacher les éléments visibles lorsque vous cliquez n'importe où sur la page. 

$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});

l'élément (div, span etc) ne devrait pas disparaître lorsque l'événement de clic se produit dans les limites de l'élément.

111
demandé sur Ayan 2009-04-03 19:31:28

17 réponses

si je comprends que vous voulez cacher une div quand vous cliquez n'importe où sauf la div, et si vous cliquez alors que sur la div, alors il ne devrait pas fermer. vous pouvez le faire: 

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

cela lie le clic à la page entière, mais si vous cliquez sur le div en question, il annulera l'événement de clic.

189
répondu Jeremy B. 2012-02-27 14:09:37

Essayez cette 

 $('.myDiv').click(function(e) { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

I use class name instead of ID , because in asp.net vous devez vous soucier de la substance supplémentaire. net attache à l'id

EDIT - Puisque vous avez ajouté une autre pièce, cela fonctionnerait comme ceci: 

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

  });
});
21
répondu TStamper 2009-04-03 16:18:33

à partir de jQuery 1.7 il y a une nouvelle façon de gérer les événements. Je pensais répondre ici juste pour montrer comment je pourrais le faire de cette "nouvelle" façon. Si vous ne l'avez pas fait, je vous recommande de lire le jQuery docs pour la méthode "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);

nous abusons des sélecteurs de jQuery et des événements. Notez que je m'assure de nettoyer le handler d'événement après. Vous pouvez automatiser ce comportement avec $('.container').one ( voir: docs ) mais parce que nous avons besoin de faire des conditions dans le handler qui n'est pas applicable ici.

18
répondu Ben Taylor 2012-05-30 01:27:46

Cet exemple de code suivant semble fonctionner le mieux pour moi. Alors que vous pouvez utiliser 'return false' qui arrête toute manipulation de cet événement pour la div ou l'un de ses enfants. Si vous voulez avoir des contrôles sur le div pop-up (un formulaire de connexion pop-up par exemple), vous devez utiliser 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>
13
répondu 2009-07-17 16:02:43

Merci, Thomas. Je suis nouvelle à JS et j'ai l'air folle de trouver une solution à mon problème. Le vôtre a aidé.

j'ai utilisé jquery pour faire un Login-box qui glisse vers le bas. Pour une meilleure expérience utilisateur, j'ai voulu faire disparaître la boîte lorsque l'utilisateur clique quelque part sauf la boîte. Je suis un peu gênée d'avoir passé quatre heures à réparer ça. Mais je suis nouvelle à JS.

Peut-être que mon code peut aider quelqu'un: 

<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>
6
répondu Tommy 2010-04-21 11:09:16

ce que vous pouvez aussi faire est: 

$(document).click(function (e)
{

  var container = $("div");

   if (!container.is(e.target) && container.has(e.target).length === 0)
  {
 container.fadeOut('slow');

   }

});

Si votre cible n'est pas un div puis cacher la div en vérifiant sa longueur est égale à zéro.

5
répondu Sandeep Pal 2014-03-05 09:34:54

j'ai fait ce qui suit. J'ai pensé à partager pour que quelqu'un d'autre puisse en profiter. 

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

dites-moi si je peux aider quelqu'un.

5
répondu foxybagga 2015-11-19 15:27:58

une Autre façon de cacher le div conteneur lors d'un clic se produit pas dans les enfants de l'élément; 

$(document).on('click', function(e) {
    if(!$.contains($('.yourContainer').get(0), e.target)) {
        $('.yourContainer').hide();
    }
});
3
répondu Renato Gama 2014-09-17 18:46:29 
  $(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();
        }
    });

ici #suggest_input est le nom de textbox and .suggest_container est le nom de la classe ul et .suggest_div est l'élément div principal pour mon auto-suggestion.

ce code est pour cacher les éléments div en cliquant n'importe où dans l'écran. Avant de faire toute chose, s'il vous plaît comprenez le code et copiez-le...

3
répondu Shaikh Arbaaz 2015-05-28 05:53:37

essayez ça, ça marche parfaitement pour moi. 

$(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();
    }
});
2
répondu Hassan Sardar 2013-08-22 06:44:51 
$('html').click(function() {
//Hide the menus if it is visible
});

$('#menu_container').click(function(event){
    event.stopPropagation();
});

mais vous devez garder à l'esprit ces choses ainsi. http://css-tricks.com/dangers-stopping-event-propagation /

2
répondu Muhammad Tahir 2015-02-03 10:49:08

Voici une solution CSS/small JS basée sur la réponse de Sandeep Pal: 

$(document).click(function (e)
{
  if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
  {
   $("#menu-toggle3").prop('checked', false);
  }
});

essayez-le en cliquant sur la case à cocher puis en dehors du menu:

https://jsfiddle.net/qo90txr8 /

2
répondu Bjoerg 2015-07-28 10:08:22

essayez ceci: 

$(document).mouseup(function (e) {
var div = $("your div");
if (!div.is(e.target) && div.has(e.target).length === 0) 
{
   div.hide();
 }
});
2
répondu Nalan Madheswaran 2015-08-16 06:14:18

cela ne fonctionne pas - il cache le .myDIV quand vous cliquez à l'intérieur de celui-ci. 

$('.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>
1
répondu Franek 2009-04-03 15:58:55

seulement 2 petites améliorations aux suggestions ci-dessus:

  • débiter le document.cliquez quand c'est fait

  • arrêter la propagation sur l'événement qui a déclenché cela, en supposant son un clic 

    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();
});
1
répondu commonpike 2012-02-13 16:21:54 

$(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>
1
répondu Ehsan KHAN 2017-10-16 07:51:51 
$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});
0
répondu mohammad gitipasand 2017-01-13 15:35:56