如何检测 jQuery 事件传播中的特定元素

Question

我有一个通知窗口（绝对定位的 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();
});

谢谢大家:-)

Answer 1

我会为#notifWindow 创建一个父 div。将它放在页面其余部分的顶部和#notifWindow 下。将你的点击事件绑定到这个父元素，当它被点击时，移除#notifWindow 和父元素。

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

Answer 2

您的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
   }
});

也就是说，创建模态窗口的通常方法是在div 下放置一个绝对定位的iframe，即视口的大小，并在那里捕获点击。这样，您的模态就会出现在 IE 中的表单控件等上方，当然它为点击提供了方便的目标。在“iframeshim”上搜索示例（或here's a very basic example here on SO I wrote for another answer）。

Answer 3

演示 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>