web-dev-qa-db-fra.com

Comment masquer un élément sur un événement click en dehors de l'élément?

J'aimerais savoir si c'est la bonne façon de masquer des éléments visibles lorsqu'on clique n'importe où sur la page.

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

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

jqueryeventsevent-bubbling
114
Franek

Si je comprends bien, vous souhaitez masquer une div lorsque vous cliquez n'importe où sauf la div, et si vous cliquez tout en survolant la div, il ne devrait PAS se fermer. Vous pouvez le faire avec ce code:

$(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 la div en question, l’événement click sera annulé.

198
Jeremy B.

Essaye ça

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

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

  });
});

J'utilise nom de la classe à la place de l'ID, car dans asp.net vous devez vous soucier des choses supplémentaires que .net attache à l'id

EDIT - Puisque vous avez ajouté un autre morceau, 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

  });
});
23
TStamper

Depuis jQuery 1.7, il existe une nouvelle façon de gérer les événements. Je pensais que je devrais répondre ici juste pour montrer comment je pourrais y arriver, à la "nouvelle" façon. Si ce n'est pas le cas, je vous recommande de lire le docs jQuery 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);

Ici, nous abusons des sélecteurs de jQuery et des événements bouillonnants. Notez que je m'assure de nettoyer le gestionnaire d'événements par la suite. Vous pouvez automatiser ce comportement avec $('.container').one ( voir: docs ), mais nous devons effectuer des conditions conditionnelles dans le gestionnaire qui ne sont pas applicables ici.

22
Ben Taylor

Cet exemple de code suivant semble fonctionner mieux pour moi. Alors que vous pouvez utiliser 'return false' pour arrêter tout traitement de cet événement pour la div ou pour l'un de ses enfants. Si vous souhaitez avoir des contrôles sur la div contextuelle (un formulaire de connexion contextuel 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
Thomas

Merci Thomas. Je suis nouveau chez JS et je cherche une solution à mon problème. Le vôtre a aidé.

J'ai utilisé jQuery pour créer une boîte de connexion qui glisse vers le bas. Pour une meilleure expérience utilisateur, je souhaitais que la boîte disparaisse lorsqu'un utilisateur clique quelque part que la boîte. Je suis un peu gêné d'utiliser environ quatre heures pour régler ce problème. Mais bon, je suis nouveau à 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
Tommy

Ce que vous pouvez aussi faire, c'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 une div, masquez la div en vérifiant que sa longueur est égale à zéro.

5
Sandeep Pal

J'ai fait le dessous. Pensée de partager afin que quelqu'un d'autre puisse également en bénéficier.

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

Faites-moi savoir si je peux aider quelqu'un à ce sujet.

5
foxybagga

Une autre façon de masquer le conteneur div lorsqu'un clic survient dans un élément non enfant;

$(document).on('click', function(e) {
    if(!$.contains($('.yourContainer').get(0), e.target)) {
        $('.yourContainer').hide();
    }
});
3
Renato Gama

Essaye ça:

 $(document).mouseup(function (e) {
    var div = $("#yourdivid");
    if (!div.is(e.target) && div.has(e.target).length === 0) 
    {
       div.hide();
     }
    });
3
Nalan Madheswaran
  $(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 et .suggest_container est le nom de la classe ul et .suggest_div est le principal élément div de ma suggestion automatique.

ce code sert à masquer les éléments div en cliquant n'importe où sur l'écran. Avant de tout faire, veuillez comprendre le code et le copier.

3
Shaikh Arbaaz
$('html').click(function() {
//Hide the menus if it is visible
});

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

mais vous devez également garder à l’esprit ces éléments. http://css-tricks.com/dangers-stopping-event-propagation/

2
Muhammad Tahir

Essayez ceci, cela fonctionne 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
Hassan Sardar

Voici une solution CSS/small JS opérationnelle 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
Bjoerg

Cela ne fonctionne pas - il cache le fichier .myDIV lorsque vous cliquez à l'intérieur.

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

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

  • dissociez le document.cliquez lorsque vous avez terminé

  • arrêter la propagation sur l'événement qui l'a déclenchée, en supposant que c'est 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
commonpike
$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});
0
mohammad gitipasand
$( "element" ).focusout(function() {
    //your code on element
})
0
Jafar Choupan