Comment masquer un élément sur un événement de clic n'importe où en dehors de l'élément?

121

Je voudrais savoir si c'est la bonne façon de masquer 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 doit pas disparaître lorsqu'un événement de clic se produit dans les limites de l'élément.

jquery events event-bubbling Franek
la source

204

Si je comprends bien, vous voulez masquer un div lorsque vous cliquez ailleurs que sur le div, et si vous cliquez sur le div, alors 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 le div en question, cela annulera l'événement de clic.

Jeremy B.
la source

1

Cela fonctionne très bien .. mais quand je clique sur le bouton qui appelle le popup, alors le popup vient et puis à nouveau disparaît immédiatement. Que faire pour cela, car le document prend deux mesures à la fois. pour appeler le popup sur body click et pour fondreOut le popup sur bodyClick

Veer Shrivastav

@VeerShrivastav est la même chose ici. e.stopPropagation (); arrêtera tous les gestionnaires de clics

brunodd

Cela ne fonctionnera PAS dans Safari si vous avez d'autres éléments à l'intérieur de l' .myDivélément. Par exemple, si vous avez une liste déroulante de sélection à l'intérieur .myDiv. Lorsque vous cliquez sur sélectionner, il pensera que vous cliquez en dehors de la boîte.

CodeGodie

24

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 le nom de la classe au lieu de l'ID , car dans asp.net vous devez vous soucier des trucs 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

  });
});

TStamper
la source

22

Depuis jQuery 1.7, il existe une nouvelle façon de gérer les événements. J'ai pensé que je répondrais ici juste pour montrer comment je pourrais procéder de la «nouvelle» façon. Si vous ne l'avez pas fait, je vous recommande de lire la documentation 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 du bouillonnement d'événements. 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 parce que nous devons faire des conditions dans le gestionnaire qui ne sont pas applicables ici.

Ben Taylor
la source

14

Cet exemple de code suivant semble fonctionner le mieux pour moi. Bien que vous puissiez utiliser 'return false' qui arrête toute gestion de cet événement pour le 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>

la source

6

Merci, Thomas. Je suis nouveau sur JS et je cherchais fou une solution à mon problème. Votre aide.

J'ai utilisé jquery pour créer une boîte de connexion qui glisse vers le bas. Pour une meilleure expérience utilisateur, j'ai décidé de faire disparaître la boîte lorsque l'utilisateur clique ailleurs que sur la boîte. Je suis un peu gêné d'avoir utilisé environ quatre heures pour résoudre ce problème. Mais bon, je suis nouveau sur 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>

Tommy
la source

5

Ce que vous pouvez également 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 un div, masquez le div en vérifiant que sa longueur est égale à zéro.

Sandeep Pal
la source

5

J'ai fait ce qui suit. Pensé à partager pour 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.

foxybagga
la source

Excellent code et ne s'exécute pas s'il div#newButtonDivn'est pas cliqué. Je vous recommande de supprimer le deuxième .click()sur la ligne 4 (si vous faites cela, n'oubliez pas de supprimer les accolades fermantes, les parenthèses et le point-virgule - ligne 9).

aullah

4

Essaye ça:

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

Nalan Madheswaran
la source

3

Une autre façon de masquer le conteneur div lorsqu'un clic se produit dans un élément not children;

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

Renato Gama
la source

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

Ici, #suggest_input in est le nom de la zone de texte et .suggest_container est le nom de la classe ul et .suggest_div est l'élément div principal de ma suggestion automatique.

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

Cheikh Arbaaz
la source

2

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

Hassan Sardar
la source

2

$('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 choses. http://css-tricks.com/dangers-stopping-event-propagation/

Muhammad Tahir
la source

2

Voici une solution CSS / small JS fonctionnelle 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/

Bjoerg
la source

1

Cela ne fonctionne pas - cela masque le .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>

Franek
la source

donc vous voulez que le div s'affiche pour montrer quand le lien est placé, puis sortez ce e.stopPropa .. de là et suivez mon option

TStamper

1

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

dissocier le document.cliquez lorsque vous avez terminé

arrêter la propagation sur l'événement qui l'a déclenché, en supposant qu'il s'agit d'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();
});

grand brochet
la source

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>

Développer l'extrait

Ehsan KHAN
la source

0

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

Jafar Choupan
la source

5

Bien que ce code puisse résoudre la question, inclure une explication aide vraiment à améliorer la qualité de votre message.

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
la source

-1

Solution simple: masquez un élément sur un événement de clic n'importe où en dehors d'un élément spécifique.

$(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 modèle
la source

Comment masquer un élément sur un événement de clic n'importe où en dehors de l'élément?

Réponses: