单击父div和子div

时间:2015-10-01 06:09:51

标签: jquery html css

我正在尝试实现这样的事情:

enter image description here

如果用户点击了该特定链接,则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');

}

4 个答案:

答案 0 :(得分:4)

您必须比较,点击的项目是否为您的$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();
});

答案 1 :(得分:1)

结帐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
});

答案 2 :(得分:1)

问题是因为click事件冒泡了DOM。因此,如果您必须确保用户点击了正在收听该事件的同一元素,那么:

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

了解事件冒泡和event.target

答案 3 :(得分:-1)

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