Comment ignorer un clic sur un enfant spécifique dans jQuery

Question

J'ai plusieurs div s inside a parent div, and one of the children div s est une case à cocher dans une balise span. Lorsque je clique sur le parent ou sur les autres enfants du div parent, je veux utiliser la fonction .show(). Mais quand je clique sur la case à cocher qui est aussi un enfant, je veux ignorer le clic. Comment puis-je le faire?

Ma logique html:

<parent-div> 
    <children1> CONTENT </children1> 
    <checkbox> CONTENT </checkbox> // The click shoud be ignored 
    <children2> CONTENT </children2> 
</parent-div> 

Ceci est mon code jusqu'à présent. J'ai essayé de le faire avec le "e.preventDefault();" fonction.

$(document).ready(function() { 
 

 
    $(".entry").on('click', function (e) { 
 
     if ($(e.target).is('span')) { 
 
      e.preventDefault(); 
 
      return; 
 
     } 
 
     $(this).siblings(".tag-cloud").show(".tag-cloud"); 
 
    }); 
 

 

 
//just for closing 
 
    $(".exit-tags").on('click', function (event) { 
 
     $(this).closest(".tag-cloud").hide(".tag-cloud"); 
 
    }); 
 

 

 
});

.tag-cloud { 
 
display:none; 
 
} 
 

 
.exit-tags:hover { 
 
cursor: pointer; 
 
color: red; 
 
} 
 
.user, .h4, .ckbox { 
 
float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="film"> 
 
     <div id="entry" class="container entry "> 
 

 
<div class="user">UserName </div> 
 

 
      <span class="ckbox"> 
 
\t \t \t \t \t \t <input type="checkbox" id="checkbox"> 
 
\t \t \t \t \t \t <label for="checkbox"></label> 
 
\t \t \t \t \t </span> 
 

 
        <h4 class="film-title"> 
 
         Movie Name 
 
        </h4> 
 

 

 
        
 
        
 
      
 
      <!-- Container Ends --> 
 
     </div> 
 

 
     <div class="tag-cloud"> 
 
      <div class="container"> 
 
       <div class="first-floor"> 
 

 
        <div class="rating"> 
 
         <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-full"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i> 
 
        </div> 
 
        <h2> 
 
         Movie Name 
 
        </h2> 
 
        <div class="tags"> 
 
         <ul> 
 
          <li><a href="">tag1</a> 
 
          </li> 
 
          <li><a href="">tag2</a> 
 
          </li> 
 
         </ul> 
 
        </div> 
 

 
        <form action=""> 
 
         <input type="text" placeholder="Tag eingeben"> 
 
        </form> 
 

 

 
        <div class="exit-tags"> 
 
         [ X ] 
 
        </div> 
 

 
        <div class="created"> 
 
         <p> 
 
          Creation Date 
 
         </p> 
 
        </div> 
 

 
        <div class="watched"> 
 
         <p> 
 
          Watched Date 
 
\t \t \t \t \t 
 
         </p> 
 
        </div> 
 

 
       </div> 
 

 

 

 
      </div> 
 
      <!-- tag-cloud --> 
 

 
     </div> 
 
    </div>

Answer 1

Avez-vous essayez d'utiliser

event.stopPropagation();