如何忽略对jQuery中特定子项的单击

Question

我有几个div的s inside a parent div, and one of the children div是一个复选框内的跨度标签。当我单击父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">
						<input type="checkbox" id="checkbox">
						<label for="checkbox"></label>
					</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
					
                        </p>
                    </div>

                </div>



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

        </div>
    </div>

​

Answer 1

你有没有尝试使用

event.stopPropagation();