Jquery灯箱点击：不

Question

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

请看示例： http://jsfiddle.net/nrUCc/7/ 我试过这个:( js专栏第42行）

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

..但是当我点击图片时它仍会触发。

有什么建议吗？ 感谢

Answer 1

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

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

e.target是触发click处理程序的元素，this是#lightbox元素。所以基本上你说只有在点击click时触发#lightbox处理程序。这也会阻止#lightbox的任何其他子元素触发上述click处理程序。

Here's a fiddle

---

另一种方法是向click元素添加另一个#lightbox > img处理程序，只需停止点击事件传播并触发上述内容：

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