Javascript Jquery-防止通过覆盖层触发单击事件

.PopBgd是屏幕大小的100%，另一个div.PopUp包含在.PopBgd中并显示在其顶部。 单击.PopBgd可获得所需的隐藏效果。但是，单击弹出窗口中的任意位置也会运行下面脚本的淡出部分

问题 如何防止脚本的淡出部分通过覆盖div触发

$('.BtnPop').click(function(e) {
    e.preventDefault();
    $($(this).data('popup')).fadeIn();
    $('.PopClose, .PopBgd').click(function() {
    $('.PopBgd').fadeOut();});
});

回答

<button type="button" class="BtnPop" data-popup=".Pop1">CLICK</button>

<div class="Pop1 PopBgd">
  <div class="PopUp">
    <a class="PopClose">&#215;</a>
    <div>Content</div>
  </div>
</div>

$('.BtnPop').click(function(e) {
    e.preventDefault();
    $($(this).data('popup')).fadeIn();
});
$('.PopClose, .PopBgd').click(function() {
$('.PopBgd').fadeOut();});

$('.PopUp').click(function(e) {
    e.stopPropagation();
});

点击
×
内容
$（'.BtnPop'）。单击（函数（e）{
e、 预防默认值（）；
$（$（this.data（'popup'））.fadeIn（）；
});
$（'.PopClose.PopBgd'）。单击（函数（）{
$（'.PopBgd'）.fadeOut（）；}）；
$（'.PopUp'）。单击（函数（e）{
e、 停止传播（）；
});

新问题 当目标div的名称未知时，如何使用StopPropogation？ 我上面试过的方法不起作用

我通过简单地向所需的div添加一个静态的第二个类名来解决额外的问题，以允许stopPropogation正常工作

$('.Pop').click(function(e) {
    e.stopPropagation();
});

防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知

---

“防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知。”

e.StopPropagation（）可能会有所帮助。StopPropagation（）在我的情况下不起作用，因为我无法声明divs名称，因为它是可变的。我上面尝试的方法对我不起作用。e.StopPropagation（）可能会有所帮助。StopPropagation（）在我的情况下不起作用，因为我无法声明divs名称，因为它是变量。我上面尝试的方法对我不起作用。请在您的问题中添加HTML，如果可能的话，添加一个JSFIDLE示例。我试图在此处为您创建一个JSFIDLE:。你的代码有一个问题是这个

应该是这个

你应该在我的小提琴上看到，点击带有“content”的弹出div不会导致淡出。谢谢。您的建议帮助我解决了上述问题。请在您的问题中添加HTML，如果可能，请添加一个JSFIDLE示例。我尝试在此处为您创建一个JSFIDLE:。你的代码有一个问题是这个

应该是这个

你应该在我的小提琴上看到，点击带有“content”的弹出div不会导致淡出。谢谢。你的建议帮助我达成了上述决议。