jQuery: la función de clic excluye a los hijos.

Tratando de comprender la función jQuery ".not ()", y me encuentro con un problema. Me gustaría que el div primario sea "cliqueable", pero si un usuario hace clic en un elemento secundario, no se llama al script.

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

el html:

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

Para hacer esto, detenga el clic en el niño usando .stopPropagation :

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

Esto evitará que los clics secundarios aumenten más allá de su nivel para que los padres no reciban el clic.

.not() se usa un poco diferente, filtra elementos fuera de su selector, por ejemplo:

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

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

Para hacer clic, su problema es que el clic en un elemento secundario burbujea hacia el elemento primario , no es que haya adjuntado inadvertidamente un controlador de clic al elemento secundario.

Estoy usando el siguiente marcado y me encontré con el mismo problema:

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

Aquí he usado la siguiente lógica:

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

En términos de la pregunta exacta, puedo ver que funciona de la siguiente manera:

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

o, por supuesto, al revés:

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

Espero que ayude.

O puedes hacer también:

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

   // ... //
});

Mi solución:

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

Personalmente, agregaría un controlador de clic al elemento secundario que no hizo nada más que detener la propagación del clic. Entonces se vería algo así como:

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

Aquí hay un ejemplo. El cuadrado verde es padre y el cuadrado amarillo es elemento hijo.

Espero que esto ayude.

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>