jQuery-防止点击事件通过上层触发

Question

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

问题如何防止脚本的fadeOut部分通过上覆的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();
});

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

我通过简单地将一个静态的第二个类名添加到所需的div来允许stopPropogation正常工作，解决了我的其他问题。

Answer 1

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

“ .stopPropagation（）防止事件冒泡DOM树，从而防止任何父处理程序收到该事件的通知。