Javascript 切换只需要在父div上工作，而不需要在子div上工作

我正在模拟一个弹出窗口，使背景淡出。我通过简单地切换一个填充整个屏幕的div来实现这一点。我希望能够通过单击外部背景来关闭弹出窗口，但在您单击新内容区域时不能关闭弹出窗口，这是当前正在发生的事情。我的代码：

JS:

HTML:

<div class="popbox" onclick="popbox()"> Click Here </div>

<div id="overbox" onclick="popbox()">
     <div id="infobox1">
          <p>This is a new box</p>
          <br />
          <p>hello </p>
          <br/><br/>
          <p style="color:blue;text-align:center;cursor:pointer;" onclick="popbox()">close</p>
     </div><!-- end infobox1 --> 
</div> <!-- end overbox -->

JSIDLE链接：

同样，我希望它仅在您单击褪色背景或“关闭”（在JSFIDLE中不起作用，但在我的网站上）时切换，而不是在它包含的白色框内单击时切换。

---

经过一些研究，似乎我正在寻找.stopPropagation（），但我根本无法让它工作。

我使用jQuery的事件处理程序使它工作：

$('#container').on('click', '.popbox, #overbox', function(e){   
  $('#overbox').toggle();
 });
 $('#container').on('click', '#infobox1', function(e){
    e.stopPropagation();
 });

为了提高性能，我将

文档

替换为

“#容器”

。您应该将所有div封装在

…

中，这样回调就不会在每次单击时都在dom上触发（即使回调只在选择器匹配时才被调用）

---

您还需要去掉

onclick

html属性，因为如果未定义该函数，它们将抛出错误。

我希望我能很好地理解您的问题

如果是这种情况，您应该具备以下条件：

<div id="overbox">

与此相反：

<div id="overbox" onclick="popbox()">

---

是更新的JSFIDLE

很遗憾，这对我不起作用。这样，当我单击.popbox p时，什么也没有发生。您是否去掉了

onclick

属性？那会抛出一个错误，什么也不会发生。是的，但实际上我只是用我找到的一个像样的解决方案回答了我自己的问题。无论如何，谢谢您的帮助。@user1925805 Eric H发布的答案实际上是正确的，解决了您的问题。考虑一下他给你的帮助是什么，我知道埃里克的解决方案是在JSFIDLE上工作，这当然是解决我的问题的一个更好的方法，但它实际上并没有在我的网站上工作。我似乎不明白为什么，但我已经把他的答案标记为有用。我相信我已经找到了一个奇怪的解决办法。看起来嵌套的切换相互抵消，因此如果我简单地向infobox1 id添加另一个onclick=“popbox（）”，它会首先将其从overbox id切换为OFF，然后立即将其切换回ON。

<div id="overbox">

<div id="overbox" onclick="popbox()">