防止灯箱在子点击时关闭答案

【问题标题】：Prevent Lightbox close on child click防止灯箱在子点击时关闭
【发布时间】：2017-05-28 00:25:41
【问题描述】：

我有一些代码，其中一个 div 在元素单击时打开，其中另一个 div 位于其中。我希望它在我单击子 div 外部时关闭，但当我单击任一时它正在关闭。

HTML：

  <div id="gallerybox">

            <div id="webbox1" ><h1 class="codetext">Hand<br> Coded</h1></div>
            <div id="webbox2"><h1 id="musich1">Wordpress<br>Sites</h1></div>
            <div id="webbox3"><h1 id="musich1">Mobile Web<br> Apps</h1></div>

            <div id="lightbox"><div id="webbox1result"></div></div>

        </div>

CSS：

 #lightbox{
height: 100vh;
width: 100vw;
z-index: 99;
position: absolute;
display: none;
opacity: 0.5;
background-color: black;
 }
 #webbox1result{
height: 280%;
width: 90%;

position: absolute;
opacity: 0.5;
background-color: aqua;
z-index: 100;
margin-top: 7%;
margin-left: 5%;
margin-right: 5%;
 }

jquery：

  $("#webbox1").click(function(){ 
$("#lightbox").css("display", "block");
} 
 );
$("#lightbox").click(function(){ 
$("#lightbox").css("display", "none");
} 
 );

【问题讨论】：

您可以检查目标是否是内部 div，然后在不应用 css 的情况下返回，这是您需要的吗？

标签： jquery css css-selectors parent-child lightbox

【解决方案1】：

我建议更改您的 click 以包含一个参数，例如以下示例中的 e：.click(function(e) { ... });

然后您可以添加if(e.target !== e.currentTarget) return; 来检查点击的目标是否具体为#lightbox。如果不是，则函数结束。

代码：

$("#lightbox").click(function(e) {
    if(e.target !== e.currentTarget) return;
    $("#lightbox").css("display", "none");
});

示例：

https://jsfiddle.net/th8gfe3v/

【讨论】：

【解决方案2】：

我猜你的问题的解决方案是这样的

jQuery:

$("#webbox1").click(function(){ 
    $("#lightbox").toggle();
});

https://jsfiddle.net/d56n492x/

【讨论】：