jQuery : la fonction de clic exclut les enfants.

Question

J'essaie de me familiariser avec la fonction jQuery ".not()" et je rencontre un problème. Je voudrais que le div parent soit "cliquable" mais que si un utilisateur clique sur un élément enfant, le script ne soit 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>

Answer 1

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 des enfants de remonter au-delà de leur niveau et le parent ne recevra 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 cliquer sur un enfant fait apparaître une bulle vers le parent et non pas que vous avez attaché par inadvertance un gestionnaire de clics à l'enfant.

Answer 2

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

Pour ce qui est de la question exacte, je peux imaginer 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 vous aidera.

Answer 3

Ou vous pouvez aussi le faire :

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

   // ... //
});

Answer 4

Ma solution :

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

Answer 5

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

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