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 を使用するにはどうすればよいですか? 上記で試したことは機能しません。

stopPropogation が通常どおり機能するように、目的の div に静的な 2 番目のクラス名を追加するだけで、追加の問題を解決しました。

4

1 に答える 1

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

.stopPropagation（） "イベントがDOMツリーをバブリングするのを防ぎ、親ハンドラーにイベントが通知されないようにします。"

于 2013-03-04T14:19:27.517 に答える