javascript - 在文档的任何地方更改类 onclick 以关闭菜单？

Question

我使用此代码打开和关闭菜单。当有人点击屏幕上的任何地方时，如何关闭它？

function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
    myLayer.style.display="block";
    myLayer.backgroundPosition="top";
} else { 
    myLayer.style.display="none";
}
}

HTML

<div style="float:left;">
<a href="#" class="button" onclick="javascript:showElement('v-menu')">
<span>Monitoring</span></a>
<ul id="v-menu" class="v-menu" style="display:none;" >
<li><a href="#" onclick="javascript:showElement('v-menu')">Start</a></li>
<li><a href="#">Stop</a></li>
</div>

Answer 1

你需要做两件事来实现这一点:

为整个文档绑定(bind)一个点击事件，如果菜单显示则隐藏。

document.addEventListener("click", function(event) {
    var menu = document.getElementById('v-menu');
    if (event.target !== menu && menu.style.display == 'block')
        menu.style.display = "none";
});

---

单击菜单时停止单击事件传播，因此事件不会冒泡到文档。

<a href="javascript:void(0)" class="button" 
    onclick="showElement('v-menu'); event.stopPropagation()">

---

实际操作:http://jsfiddle.net/william/Pfv8N/ .