Jquery灯箱点击:not

Question

我尝试使用jQuery获取:not点击事件。 本质上，我正在尝试构建一个灯箱。 工作正常，但我希望它仅在单击黑色空间时关闭。 如果单击图像，则不应隐藏灯箱。

请参见示例： http://jsfiddle.net/nrUCc/7/ 我已尝试过这个：（JS栏中的第42行）

 $('#lightbox').not('#lightbox img').click(function(e){
        $(this).css('display','none');
 })

然而，当我点击图片时，它仍然会触发。

有什么建议吗？ 谢谢

- Adam

Answer 1

您可以将目标元素与 this 进行比较：

$('#lightbox').click(function(e) {
    if (e.target === this) { 
        $(this).css('display','none');
    }
});

e.target 是触发 click 事件的元素，this 是 #lightbox 元素。所以基本上你的意思是只有在点击了 #lightbox 元素时才触发 click 事件处理程序。这也将防止任何其他子元素触发上述 click 事件处理程序。

这里有一个示例

---

另一种方法是为#lightbox > img元素添加另一个click处理程序，并简单地阻止点击事件传播并触发上述操作：

$('#lightbox > img').click(function(e) {
    e.stopPropagation();
});

- billyonecan