在圖像外點擊時隱藏div

Question

我有一個帶有幾個隱藏div的網頁。我設置了它們，這樣當點擊一個圖像時，它們將顯示，如果圖像被再次點擊，它們將被隱藏。問題是，如果它們可見並且單擊頁面的任何部分，我需要將它們隱藏起來。我搜索了高和低，並找到了一些建議，但還沒有找到一個工程。誰能幫忙？

Answer 1

$(window).click(function() { 
    $('img').hide(); 
}); 

Very simple example

Answer 2

我通常綁定document.click事件外監聽點擊，然後在關閉窗口中刪除它。

// in function after your image shows up. 
document.click = hideImage; 
// other code to hide image when image is clicked 

// in function after your image is hidden. 
document.click = null; 

如果您使用的是jQuery，那就更容易了，因爲您可以命名空間來安全添加和刪除事件。所以你不綁定到document其他點擊事件干擾

// in function after your image shows up. 
$(document).bind('click.imagehide', hideImage); 
// other code to hide image when image is clicked 

// in function after your image is hidden. 
$(document).unbind('click.imagehide'); 

這種方法更安全。

Answer 3

你需要做的是防止事件冒泡。如果你正在使用jQuery的你可以這樣做：

$(document).on ('click', function() { $('div').hide(); }); 
$('img').on ('click', function (e) { e.stopPropagation(); }); 

Remeber改變選擇，以滿足您的需求。