jQueryの特定の子供のクリックを無視する方法

Question

私は複数のdivを持っていますs inside a parent div, and one of the children divはスパンタグ内のチェックボックスです。 親divの親または他の子をクリックすると、.show（）関数を使いたいと思います。しかし、子どもでもあるチェックボックスをクリックすると、そのクリックを無視します。どうすればいいですか？

私のhtmlロジック：

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

これは、これまでの私のコードです。私は "e.preventDefault（）;でそれをしようとしました関数。

$(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

あなたは

event.stopPropagation();