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

你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”上进行网络搜索以获取示例（或者这里有一个非常基本的示例，所以我写了另一个答案）。

于 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 回答
0

我会为#notifWindow 创建一个父div。将它放在页面其余部分的顶部和#notifWindow 下。将您的单击事件绑定到此父元素，并在单击它时删除#notifWindow 和父元素。

您甚至可以在这个父 div 中添加一些样式元素，使其半透明，稍微遮挡页面的其余部分。这对用户来说是一个很好的视觉信号，表明notifWindow 很重要，并且还暗示单击“窗口”将关闭它。

于 2012-07-10T21:28:57.577 回答