做出絕對的div隱藏當點擊它之外的東西

Question

我有，當被點擊我的網站按鈕運行功能的一些代碼：

function shadow() { 
    document.getElementById("overlay").style.visibility="visible"; 
    document.getElementById("dim").style.visibility="visible"; 
    document.getElementById("dim").onclick="document.getElementById('dim','overlay').style.visibility='hidden'"; 
} 

隨着覆蓋是疊加的div，我想可以重新隱藏，並且在函數運行時暗淡爲整個頁面上較低的z-index調光器。 第三行是我的嘗試，當點擊疊加層外的某個區域時，暗淡和覆蓋層就會消失 - 幫助會很棒！

Answer 1

onclick property需要函數引用，而不是字符串。另外，getElementById方法只接受一個參數id，這意味着只有您傳遞給它的第一個元素id會被選中。

根據您所提供的代碼，它看起來像你想是這樣的（live example）：

function shadow() { 
    var overlay = document.getElementById('overlay'); 
    var dim = document.getElementById('dim'); 

    overlay.style.visibility = 'visible'; 
    dim.style.visibility = 'visible'; 

    dim.onclick = function() { 
    overlay.style.visibility = 'hidden'; 
    dim.style.visibility = 'hidden'; 
    }; 
} 

另外，您還可以添加一個click事件偵聽器document，然後確定event.target是否爲#overlay元件。

舉例來說，下面的工作（live example）：

document.addEventListener('click', function (event) { 
    var overlay = document.getElementById('overlay'); 
    var dim = document.getElementById('dim'); 

    if (event.target !== overlay && !event.target.closest('#overlay')) { 
    overlay.style.visibility = 'hidden'; 
    dim.style.visibility = 'hidden'; 
    } 
});