jQueryでは、体のどこかをクリックしてオーバーレイされたdivをフェードアウトするにはどうすればよいですか？

Question

イメージビューアを作っています。画像をクリックすると、内部の画像で「オーバーレイ」Divがフェードインされます。しかし、以下のコードでは、画像をクリックするとdivがフェードインしますが、再クリックすることなくすぐにフェードアウトします。私のコードで何が間違っていますか？

内部にの最初の機能はありますが動作しません。オーバーレイがフェードインした後でのみ、この「ボディクリック」が発生するようにするにはどうすればよいですか？

ありがとうございます。

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