單擊時顯示元素，單擊不同的 div 時隱藏

Question

標題說明了一切。 單擊時顯示元素沒有問題。

但是每當我點擊其他地方時，我都想隱藏它。 一個很好的例子是本網站標題中的“StackExchange”標簽。 當我點擊它時，它會顯示其他選項。 但是當我點擊別處時，它會隱藏。

Answer 1

window.onclick = function() { alert('it was so simple, wasn\\'t it?'); };

Answer 2

可以在點擊某物時添加click事件，判斷是否屬於html：

function addListener(element, e, fn) {  //add event function,browser compatible
    if (element.addEventListener) {
        element.addEventListener(e, fn, false);
    } else {
        element.attachEvent("on" + e, fn);
    }
}
addListener(document, "click",
function(evt) {
    var evt = window.event ? window.event: evt,
    target = evt.srcElement || evt.target;
    if (target.id == "showDiv") {  //the div you want to show 
        document.getElementById("myDiv").style.display = "";
        return;
    } 
    else {
        //judge target belongs to html or not,You may change condition here
        while (target.nodeName.toLowerCase() != "div" && target.nodeName.toLowerCase() != "html") {  
            target = target.parentNode;
        }
        if (target.nodeName.toLowerCase() == "html") {
            document.getElementById("myDiv").style.display = "none";
        }

    }
})

Answer 3

Michal Leszczyk 是對的，使用窗口處理程序隱藏 div

當您在單擊時顯示 div 時，也可以使用 event.stopPropagation()。 防止同時隱藏