0

通知ウィンドウ (絶対に配置された div) があり、そのウィンドウの外側のすべてをクリックすると閉じます。

私は試した：

<div id="#notifWindow">
    <div id="notifs">Notifications...</div>
    <a class="ajax" data-bla="blabla">Click for ajax</a>
</div>

$(document).on(function(event){
    // If clicking over child elements stopPropagation() else window is closed.
    if ($(this).closest('#notifWindow').length) event.stopPropagation();
    else $('#notifWindow').hide();
})

// Just for your information

$(document).on('click', 'a.ajax', function(event){
    // If I use onclick=event.stopPropagation() in #notifWindow this ajax fails
})

ここで、 $(this) はイベントをスローする要素ではなく、ドキュメントです。

お時間をいただきありがとうございます。

解決

http://jsfiddle.net/8CyQU/

// Every .ajax inside #notifWindow (dinamically ajax generated) is executed.
$('#notifWindow').on('click', '.ajax', function(event) {
    alert('This ajax is executed!');
});

// If clicking everywhere inside #notifWindow the propagation of 'click' is stopped
$('#notifWindow').on('click', function(event) {
    event.stopPropagation();

$(document).on('click', '#open', function(event){
    $('#notifWindow').slideDown();
    event.stopInmediatePropagation(); // It avoid other click events for (document).
});

// Hides the window clicking everywhere
$(document).on('click', function(event) {
    $('#notifWindow').hide();
});

皆さん、ありがとうございました ：-）

4

3 に答える 3

0

#notifWindowの親divを作成します。ページの残りの部分の上、＃notifWindowの下に配置します。クリックイベントをこの親要素にバインドし、クリックされたら、＃notifWindowと親を削除します。

この親divにいくつかのスタイル要素を追加して、ページの残りの部分をわずかに覆い隠すようにすることもできます。これは、notifWindowが重要であることをユーザーに視覚的に示す良いシグナルであり、「ウィンドウ」をクリックするとウィンドウが閉じるというヒントも提供します。

于 2012-07-10T21:28:57.577 に答える
0

あなたonはどんなイベントもフックしていません。それとは別に、あなたは見たいと思うでしょうevent.target。それで：：

$(document).on("click", function(event){
   if ($(event.target).closest("#notifWindow")[0]) {
       // Click on the notify window
   }
   else {
       // Click elsewhere, close the notify window
   }
});

とはいえ、モーダルウィンドウを作成する通常のiframe方法は、ビューポートのサイズである絶対位置を下に配置しdiv、そこでクリックをキャプチャすることです。そうすれば、モーダルはIEのフォームコントロールなどの上に表示され、もちろんクリックの便利なターゲットになります。iframe例については、「shim」でWeb検索を実行してください（または、これが別の回答のために書いたSOの非常に基本的な例です）。

于 2012-07-10T21:29:34.150 に答える
0

デモ http://jsfiddle.net/2g6Qs/1/

e.stopImmediatePropagation（）を使用します：http：//api.jquery.com/event.stopImmediatePropagation/

お役に立てれば、:)

コード

$('.parent').delegate('.child','click',function(e){
    alert('child click');
    e.stopImmediatePropagation();
});

$('.parent').delegate('a.ajax','click',function(e){
    alert('anchor ajax click');
    e.stopImmediatePropagation();
});

$('.parent').bind('click',function(e){
    alert('parent click');
});

html

<div class="parent" id="notifWindow">parent
    <div class="child" id="notifs">child</div>
    <div class="child">child</div>
    <a class="ajax" data-bla="blabla">Click for ajax</a>
</div>
于 2012-07-10T21:30:52.217 に答える