1

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

问题 如何防止脚本的淡出部分通过覆盖的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 正常工作，解决了我的额外问题。

4

1 回答 1

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

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

于 2013-03-04T14:19:27.517 回答