jquery - 在 jQuery 中，如何通过单击正文中的任意位置来淡出覆盖 div？

Question

我正在制作一个图像查看器。当我点击一个图像时，它会在“覆盖”Div 中淡入淡出，其中包含图像。但是使用下面的代码，当我单击图像时，div 淡入但它立即淡出而无需我重新单击。我的代码有什么问题？

我认为我需要将“body click”行放在第一个函数中，但它不起作用。我怎样才能使这种“ body 点击”仅在叠加层淡入之后发生？

提前致谢。

$('.pic').click(function(){
        $('#overlay').html("<img class='enlarged_pic' src='" + (this).src + "'>").fadeIn();
        }); 

$('body').click(function(){
        $('#overlay').fadeOut();
        });     

Answer 1

您需要添加 e.stopPropagation()给你的第一个处理程序。发生的情况是点击事件从您的 .pic 冒泡到正文，当您只需要一个处理程序时触发两个处理程序。 .stopPropagation() 阻止事件在 DOM 的任何更高层冒泡。

$('.pic').click(function(e){ // don't forget that 'e'
    e.stopPropagation();
    $('#overlay').html("<img class='enlarged_pic' src='" + (this).src + "'>").fadeIn();
}); 

$('body').click(function(e){
    $('#overlay').fadeOut();
});  

http://jsfiddle.net/VQkNa/

您可能还希望点击叠加层本身不会淡化叠加层。这可以通过检测点击目标轻松完成:

$('body').click(function(e) {
    if (e.target.id !== "overlay") {
        $('#overlay').fadeOut();
    };
});​

http://jsfiddle.net/VQkNa/1/