jQuery fare clic in un punto qualsiasi della pagina tranne su 1 div


Risposte:


145

È possibile applicare clicksu bodydi un documento e annullare clickl'elaborazione se l' clickevento viene generato da div con id menu_content, questo si legano evento singolo elemento e il salvataggio di legame di clickogni elemento ad eccezionemenu_content

$('body').click(function(evt){    
       if(evt.target.id == "menu_content")
          return;
       //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
       if($(evt.target).closest('#menu_content').length)
          return;             

      //Do processing of click event here for every element except with id menu_content

});

3
che dire dei figli discendenti nel DIV?
iKamy

2
Possiamo usare più vicino per controllare la fonte dell'evento ha qualsiasi antenato con id menu_content come if ($ (evt.target) .closest ('# menu_content'). Length) retrun; controlla la mia risposta aggiornata.
Adil

Poiché closestinizia con l'elemento corrente, gestisce i clic su menu_content, così come i clic sui discendenti. Penso che il secondo ifsia tutto ciò di cui hai bisogno.
arrivederci

50

Consulta la documentazione per jQuery Event Target . Utilizzando la proprietà target dell'oggetto evento, è possibile rilevare il punto in cui ha avuto origine il clic all'interno #menu_contentdell'elemento e, in tal caso, terminare anticipatamente il gestore dei clic. Dovrai utilizzare .closest()per gestire i casi in cui il clic ha avuto origine in un discendente di #menu_content.

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

    // Check if click was triggered on or within #menu_content
    if( $(e.target).closest("#menu_content").length > 0 ) {
        return false;
    }

    // Otherwise
    // trigger your click function
});

43

prova questo

 $('html').click(function() {
 //your stuf
 });

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

puoi anche utilizzare gli eventi esterni


5
Questo funziona, ma l'uso di event.stopPropagation () può avere effetti a catena su altri JS contenuti nel genitore.
Edd Smith

9

So che questa domanda ha avuto risposta, e tutte le risposte sono carine. Ma volevo aggiungere i miei due centesimi a questa domanda per le persone che hanno un problema simile (ma non esattamente lo stesso).

In un modo più generale, possiamo fare qualcosa del genere:

$('body').click(function(evt){    
    if(!$(evt.target).is('#menu_content')) {
        //event handling code
    }
});

In questo modo possiamo gestire non solo gli eventi attivati ​​da qualsiasi cosa tranne l'elemento con id, menu_contentma anche gli eventi che vengono attivati ​​da qualsiasi cosa eccetto qualsiasi elemento che possiamo selezionare utilizzando i selettori CSS.

Ad esempio, nel seguente frammento di codice ottengo eventi attivati ​​da qualsiasi elemento tranne tutti gli <li>elementi che sono discendenti dell'elemento div con id myNavbar.

$('body').click(function(evt){    
    if(!$(evt.target).is('div#myNavbar li')) {
        //event handling code
    }
});

1
Volevo solo dire che questo metodo ha funzionato bene per me, ho usato .is () e anche .closest () con un selettore CSS che non aveva ID ma solo alcune classi grazie
relipse

7

ecco cosa ho fatto. volevo assicurarmi di poter fare clic su uno qualsiasi dei bambini nel mio datepicker senza chiuderlo.

$('html').click(function(e){
    if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
        // clicked menu content or children
    } else {
        // didnt click menu content
    }
});

il mio codice attuale:

$('html').click(function(e){
    if (e.target.id != 'datepicker'
        && $(e.target).parents('#datepicker').length == 0
        && !$(e.target).hasClass('datepicker')
    ) {
        $('#datepicker').remove();
    }
});

Bella versione che include clic su bambini e classe, dovrebbe essere la risposta scelta!
rAthus
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.