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

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

J'espère que cela vous aidera.

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>