Question

我正在制作一个图像浏览器。当我点击图像时，它会在“叠加”Div中消失，里面有图像。但是使用下面的代码，当我点击图像时，div会淡入但它会立即消失，而不会重新点击。我的代码出了什么问题？

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

提前致谢。

$('.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/

Answer 2

我会假设你的两个方法都被调用了。

当你点击'.pic'时，它会调用.fadeIn（）; 而且，因为当你单击'.pic'时它也在主体上，它调用.fadeOut（）;

我会尝试更改身体上的选择器，不包括.pics。

Answer 3

试试这个：

var isOverlaid = false;
$('.pic').mousedown(function() {
    $('#overlay').html("<img class='enlarged_pic' src='" + (this).src + "'>").fadeIn('slow', function() {
        isOverlaid = true;
    });

});
$('body').mousedown(function() {
    if (isOverlaid) {
        $('#overlay').fadeOut('slow', function() {
            isOverlaid = false;
        });
    }
});

http://jsfiddle.net/XeNc8/

在jQuery中，如何通过单击正文中的任何位置来淡出叠加div？

3 个答案: