jQuery: la funzione clic esclude i bambini.

Sto cercando di avvolgere la mia testa attorno alla funzione j .Query ".not ()", e ho riscontrato un problema. Vorrei che il div genitore 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:

<div class="example">
   <div>
      <p>This content is not affected by clicks.</p>
   </div>
</div>

Per fare ciò, interrompere il clic sul figlio utilizzando .stopPropagation :

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

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

.not() viene usato in modo leggermente diverso, filtra gli elementi dal selettore, ad esempio:

<div class="bob" id="myID"></div>
<div class="bob"></div>

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

Per fare clic, il tuo problema è che il clic su un bambino si gonfia al genitore , non che tu abbia inavvertitamente attaccato un gestore di clic al figlio.

Sto usando il seguente markup e ho riscontrato lo stesso problema:

<ul class="nav">
    <li><a href="abc.html">abc</a></li>
    <li><a href="def.html">def</a></li>
</ul>

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 ovviamente il contrario:

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

Spero che aiuti.

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

Personalmente aggiungerei un gestore di clic all'elemento figlio che non ha fatto altro che interrompere la propagazione del clic. Quindi sarebbe simile a:

$('.example > div').click(function (e) {
    e.stopPropagation();
});

Ecco un esempio Il quadrato verde è il genitore e il quadrato giallo è l'elemento figlio.

Spero che questo aiuti.

var childElementClicked;

$("#parentElement").click(function(){

		$("#childElement").click(function(){
		   childElementClicked = true;
		});

		if( childElementClicked != true ) {

			// It is clicked on parent but not on child.
      // Now do some action that you want.
      alert('Clicked on parent');
			
		}else{
      alert('Clicked on child');
    }
    
    childElementClicked = false;
	
});

#parentElement{
width:200px;
height:200px;
background-color:green;
position:relative;
}

#childElement{
margin-top:50px;
margin-left:50px;
width:100px;
height:100px;
background-color:yellow;
position:absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parentElement">
  <div id="childElement">
  </div>
</div>