Come faccio a nascondere un elemento in un evento clic ovunque al di fuori dell'elemento?

121

Vorrei sapere se questo è il modo corretto di nascondere gli elementi visibili quando si fa clic in un punto qualsiasi della pagina.

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

L'elemento (div, span, ecc.) Non dovrebbe scomparire quando si verifica un evento di clic entro i limiti dell'elemento.

jquery events event-bubbling

— Franek
fonte

204

Se ho capito, vuoi nascondere un div quando fai clic ovunque tranne che sul div, e se fai clic mentre sei sopra il div, allora NON dovrebbe chiudersi. Puoi farlo con questo codice:

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

Questo lega il clic all'intera pagina, ma se fai clic sul div in questione, annullerà l'evento clic.

— Jeremy B.
fonte

1

Funziona bene .. ma quando clicco sul pulsante che chiama il popup, viene visualizzato il popup e poi scompare immediatamente. Cosa fare per questo dato che il documento sta eseguendo due azioni alla volta. per chiamare il popup sul clic del corpo e per svanireOut the popup on bodyClick

— Veer Shrivastav

@VeerShrivastav stesso accade qui. e.stopPropagation (); interromperà tutti i gestori di clic

— brunodd

Questo NON funzionerà in Safari se hai altri elementi all'interno di .myDivelement. Ad esempio, se hai un menu a discesa di selezione all'interno .myDiv. Quando fai clic sulla selezione, penserà che stai facendo clic fuori dal riquadro.

— CodeGodie

24

Prova questo

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

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

  });
});

Uso il nome della classe invece dell'ID , perché in asp.net devi preoccuparti delle cose extra che .net allega all'id

EDIT- Dato che hai aggiunto un altro pezzo, funzionerebbe in questo modo:

 $('.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 partire da jQuery 1.7 c'è un nuovo modo di gestire gli eventi. Ho pensato di rispondere qui solo per dimostrare come potrei fare questo nel modo "nuovo". Se non l'hai fatto, ti consiglio di leggere la documentazione di jQuery per il metodo "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);

Qui stiamo abusando dei selettori di jQuery e del bubbling di eventi. Nota che mi assicuro di pulire il gestore di eventi in seguito. Puoi automatizzare questo comportamento con $('.container').one( vedi: documenti ) ma perché abbiamo bisogno di fare condizionali all'interno del gestore che non sono applicabili qui.

— Ben Taylor
fonte

13

Il seguente esempio di codice sembra funzionare meglio per me. Mentre puoi usare 'return false' che interrompe tutta la gestione di quell'evento per il div o uno qualsiasi dei suoi figli. Se vuoi avere controlli sul div pop-up (un modulo di login pop-up per esempio) devi usare 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>

6

Grazie, Thomas. Sono nuovo in JS e stavo cercando una soluzione al mio problema. Il tuo ha aiutato.

Ho usato jquery per creare una casella di accesso che scorre verso il basso. Per la migliore esperienza utente, ho deciso di far scomparire la casella quando l'utente fa clic in un punto diverso dalla casella. Sono un po 'imbarazzato per aver impiegato circa quattro ore a risolvere questo problema. Ma hey, sono nuovo su JS.

Forse il mio codice può aiutare qualcuno:

<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

Quello che puoi fare è anche:

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

  var container = $("div");

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

   }

});

Se il tuo obiettivo non è un div, nascondi il div verificando che la sua lunghezza sia uguale a zero.

— Sandeep Pal
fonte

5

Ho fatto quanto segue. Ho pensato di condividere in modo che anche qualcun altro potesse trarne vantaggio.

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

Fammi sapere se posso aiutare qualcuno su questo.

— foxybagga
fonte

Ottimo codice e non viene eseguito se div#newButtonDivnon viene cliccato. Ti consiglio di rimuovere il secondo .click()sulla riga 4 (se lo fai, ricordati di rimuovere le parentesi graffe di chiusura, le parentesi e il punto e virgola - riga 9).

— aullah

4

Prova questo:

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

— Nalan Madheswaran
fonte

3

Un altro modo per nascondere il div contenitore quando si verifica un clic in un elemento non figlio;

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

Qui #suggest_input in è il nome della casella di testo e .suggest_container è il nome della classe ul e .suggest_div è l'elemento div principale per il mio suggerimento automatico.

questo codice serve per nascondere gli elementi div facendo clic in un punto qualsiasi dello schermo. Prima di fare ogni cosa ti preghiamo di comprendere il codice e copiarlo ...

— Shaikh Arbaaz
fonte

2

Prova questo, funziona perfettamente per me.

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

ma devi tenere a mente anche queste cose. http://css-tricks.com/dangers-stopping-event-propagation/

— Muhammad Tahir
fonte

2

Ecco una soluzione CSS / JS funzionante basata sulla risposta di Sandeep Pal:

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

Provalo facendo clic sulla casella di controllo e quindi fuori dal menu:

https://jsfiddle.net/qo90txr8/

— Bjoerg
fonte

1

Questo non funziona: nasconde .myDIV quando fai clic al suo interno.

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

quindi vuoi che il div mostri da mostrare quando il link è posizionato, quindi prendi quell'e.stopPropa .. fuori da lì e segui la mia opzione

— TStamper

1

Solo 2 piccoli miglioramenti ai suggerimenti di cui sopra:

svincolare il documento. fare clic al termine

interrompere la propagazione sull'evento che lo ha attivato, assumendo che sia 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();
});

— 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>

Espandi lo snippet

— Ehsan KHAN
fonte

0

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

— Jafar Choupan
fonte

5

Sebbene questo codice possa risolvere la domanda, includere una spiegazione aiuta davvero a migliorare la qualità del tuo post.

— 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

Soluzione semplice: nascondi un elemento in un evento clic ovunque al di fuori di un elemento specifico.

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