jQuery: cliquez sur la fonction exclure les enfants.

Essayer de comprendre la fonction jQuery ".not ()" et rencontrer un problème. Je voudrais que le div parent soit "cliquable" mais si un utilisateur clique sur un élément enfant, le script n'est pas appelé.

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

le html:

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

Pour ce faire, arrêtez le clic sur l'enfant en utilisant .stopPropagation :

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

Cela empêchera les clics enfants de dépasser leur niveau afin que le parent ne reçoive pas le clic.

.not() est utilisé un peu différemment, il filtre les éléments de votre sélecteur, par exemple:

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

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

Pour le clic, votre problème est que le clic sur un enfant fait une bulle jusqu'au parent , non pas que vous avez attaché par inadvertance un gestionnaire de clic à l'enfant.

J'utilise le balisage suivant et j'ai rencontré le même problème:

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

Ici, j'ai utilisé la logique suivante:

$(".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 termes de question exacte, je peux voir que cela fonctionne comme suit:

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

ou bien sûr l'inverse:

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

J'espère que cela pourra aider.

Ou vous pouvez faire aussi:

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

   // ... //
});

Ma solution:

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

Personnellement, j'ajouterais un gestionnaire de clics à l'élément enfant qui ne faisait rien d'autre que stopper la propagation du clic. Cela ressemblerait donc à quelque chose comme:

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

Voici un exemple. Le carré vert est le parent et le carré jaune est l'élément enfant.

J'espère que cela aide.

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>