jQuery: funzione clic esclude bambini.

Cercando di abbracciare la funzione jQuery “.not ()” e l’esecuzione di un problema. Mi piacerebbe che il div padre fosse “cliccabile”, ma se un utente fa clic su un elemento figlio, lo script non viene chiamato.

$(this).not(children()).click(function(){ $(".example").fadeOut("fast"); }); 

l’html:

 

This content is not affected by clicks.

Per fare questo, ferma il click sul bambino usando .stopPropagation :

 $(".example").click(function(){ $(this).fadeOut("fast"); }).children().click(function(e) { return false; }); 

Ciò impedirà ai click secondari di superare il loro livello in modo che il genitore non riceva il clic.

.not() è usato un po ‘diversamente, filtra elementi dal tuo selettore, ad esempio:

 
$(".bob").not("#myID"); //removes the element with myID

Per fare clic, il tuo problema è che il clic su un bambino fa scoppiare il genitore , non che tu abbia inavvertitamente collegato un gestore di clic al figlio.

Uso il seguente markup e ho riscontrato lo stesso problema:

  

Qui ho usato la seguente logica:

 $(".nav > li").click(function(e){ if(e.target != this) return; // only continue if the target itself has been clicked // this section only processes if the .nav > li itself is clicked. alert("you clicked .nav > li, but not it's children"); }); 

In termini di domanda esatta, posso vedere che funziona come segue:

 $(".example").click(function(e){ if(e.target != this) return; // only continue if the target itself has been clicked $(".example").fadeOut("fast"); }); 

o, naturalmente, al contrario:

 $(".example").click(function(e){ if(e.target == this){ // only if the target itself has been clicked $(".example").fadeOut("fast"); } }); 

Spero possa aiutare.

O puoi anche fare:

 $('.example').on('click', function(e) { if( e.target != this ) return false; // ... // }); 

La mia soluzione:

 jQuery('.foo').on('click',function(event){ if ( !jQuery(event.target).is('.foo *') ) { // code goes here } });