Question

我有这段代码

<style>

.Parent {width:500px;height:500px;background:#000}
.Parent .Child {width:250px;height:250px;background:#F00}

</style>

<div class="Parent">

   <div class="child"></div>

</div>

<script>

$(document).ready(function() {

     $('.Parent').click(function () {

           $(this).hide()

     });

     /* 
     But if i click on <div class="Child"></div> , 
     <div class="Parent"></div> won't get hidden .
     */ 

});

</script>

我希望我的代码能够隐藏＆＃39; .parent＆＃39;，当我点击.Parent中的区域时，我们不会包含.Child element，如果我点击的区域包含在＆＃39; .child＆＃39;地区，它什么都不做。

所以你们会建议什么？

Answer 1

这样做：

$('.Parent, .child').click(function(e) {
  if ($(this).hasClass('child')) {
    return false;
  }
  $(this).hide();
});

$('.Parent, .child').click(function(e) {
  if ($(this).hasClass('child')) {
    return false;
  }
  $(this).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='Parent' style='width:auto; padding:50px; border:red solid 1px;'>
  <div class='child' style='width:200px; height:200px;border:green solid 1px;'>
    child
  </div>
</div>

Answer 2

简单地制作event.stopPropagation();以阻止儿童的事件传播给父母。

因此脚本变为：

$('.Parent').click(function () {
        $(this).hide();
});
$('.child').click(function (e) {
        e.stopPropagation();
});

请参阅小提琴：“http://jsfiddle.net/sftknxeo/1/”

Answer 3

您可以使用事件的目标来确定您点击的内容。这样，如果您点击了孩子，也可以指定要发生的事件。（如果需要的话。）

    $('.Parent').click(function(e){
        if(e.target == this){
            $(this).hide()
        }
    });

DEMO

Answer 4

快速和脏的版本只是添加另一个事件处理程序。向隐藏父级的子级添加单击处理程序。然后，如果您点击父级，它会隐藏自己，如果您单击子级，则会隐藏父级。

$('.child').click(function (e) {
  $('.parent').hide();        
});

当然，这不是最优雅的解决方案，但它快速而简单，应该完成工作。

Answer 5

$('.Parent').click(function () {

     $(this).css("visibility", "hidden");
     $(".Parent" ).children().css("visibility", "visible");


 });

如果你只是想隐藏父母那么它就会做必要的事情。

Answer 6

通过查看事件对象的target属性来检查单击的元素。以下是您可能想要做的事情：

$(function () {
    $('.Parent').click(function (e) {
        if ($(e.target).hasClass("child")) {
            return false;
        }
        $(this).hide();
    });
});

Answer 7

$('.parent').click(function(e) {
  if ($(this).hasClass('child')) {
    return false;
  }
  $(this).hide();
});

单击子元素外部的任何位置时如何隐藏父级

7 个答案: