点击父元素和子元素的问题

Question

我正在尝试实现类似这样的东西：

如果用户点击了特定的链接，一个div元素将覆盖整个屏幕，用户可以通过单击灰色区域关闭该div。

这是我的实现方法：

<div id="cover" style="width:100%;height:100%;background-color:rgba(109,109,109,0.8);z-index:3; position:absolute; top:0px;left:0px;">
<div class="contactinfo">
</div>
</div>

它将首先被隐藏：

var $cover = $('#cover');
$cover.hide();

它由以下控制：

$('.contact').click(function(){
$cover.show();
});

$cover.click(function(){
$cover.hide();
});

但问题是，当我点击白色区域（内部div）时，它仍然会关闭，我不希望它关闭。我该怎么办？只有在灰色区域被点击时才应该关闭。

这是我的内部div的css：

.contactinfo{

margin-top:200px;
margin-left:auto;
margin-bottom:auto;
margin-right:auto;
border:solid;
height:300px;
width:300px;
border-radius:25px;
background-image:Url('https://www.kiwiconferencing.co.nz/wp-content/uploads/2015/03/Grey-Background-43.jpg');

}

- Carlos Miguel Colanta

---

你能发一个 CodePen 吗？ - Underfrog

嗯，我的代码现在有点乱，但让我试试。 - Carlos Miguel Colanta

Answer 1

您需要比较所点击的项是否是您的$cover项。

$cover.on('click', function(e){
    if( e.target != this ) {
       //The clicked item is your inner div 
       return;
    }
    //Your clicked item is your $cover div
    $cover.hide();
});

- Sim

---

我明白了，所以如果我在父级 div 中点击任何内容，它也会被视为点击父级 div 本身？ - Carlos Miguel Colanta

@CarlosMiguelColanta 是的，显然这就是所谓的冒泡。如果一个元素没有给定点击处理程序，它将冒泡到其父级，而父级上有附加的点击处理程序。 - Araknid

@CarlosMiguelColanta 如果这对你有帮助，请考虑给个+1 :) - Araknid

嗯，有没有其他停止冒泡的替代方法？我尝试在我的“contactinfo”上添加一个点击处理程序，但它没有覆盖父级的处理程序。 - Carlos Miguel Colanta

@CarlosMiguelColanta 为什么不把 contactinfo div 放在 cover div 外面呢？这样它就永远不会冒泡了。 - Andy

Answer 2

请看这个 fiddle 的结账页面。

JS

var $link = $(".contact");
var $cover = $('#cover');
var $contactinfo = $('.contactinfo');

$cover.hide();


$link.click(function(){
$cover.show();
});

$cover.click(function(){
$cover.hide();
});


$contactinfo.click(function(e) {
    ruturn false
});

- Nilesh Mahajan

---

@Nilesh Mahajan，@Carlos Miguel Colanta：在 e.stopPropagation(); 的位置写入 return false 也会达到同样的效果。 - Araknid

@Yogita088 感谢您的建议。我已经更新了我的答案，请查看。 - Nilesh Mahajan

@Salketer 感谢您的建议。我已经更新了我的答案，请看一下。 - Nilesh Mahajan

返回false也会阻止默认行为，而不仅仅是停止传播... @NileshMahajan下次请更新您的答案，而不是修改。 - Salketer

Answer 3

问题是因为点击事件冒泡到了DOM。所以在事件中，您必须确保用户点击的是监听该事件的相同元素，如下所示：

$cover.click(function(event){
    if(event.target == this){
        $cover.hide();
    }
});

阅读有关事件冒泡和event.target的内容。

- Salketer

Answer 4

$('body').on('click','.greyarea',function(evt){
     Var target = evt.target || evt.srcElement
      Var isMouseClickedInsideGreyArea =           $(target).closest(this).length
      If(isMouseClickedInsideGreyArea){
           /*stay open */}else{/*close*/}})

- Steve Tomlin