Javascript 如何对脚本进行补充，使菜单通过在其外部单击而隐藏？

现在，通过单击链接可以打开和隐藏菜单

函数getposOffset（覆盖，offsettype）{ var totaloffset=（offsettype=“left”）？overlay.offsetLeft:overlay.offsetTop； var parentEl=overlay.offsetParent； while（parentEl！=null）{ totaloffset=（offsettype=“left”）？totaloffset+parentEl.offsetLeft:totaloffset+parentEl.offsetTop； parentEl=parentEl.offsetParent； } 返回总偏移量； } 功能覆盖（curobj、subbjsr、opt_位置）{ if（document.getElementById）{ var subobj=document.getElementById（subobjsr） subobj.style.display=（subobj.style.display！=“块”）？“块”：“无” var xpos=getposOffset（curobj，“左”）+（（opt_position的类型！=“未定义”&&opt_position.indexOf（“右”）！=-1）？-（subobj.offsetWidth curobj.offsetWidth）：0） var ypos=getposOffset（curobj，“top”）+（（opt_position的类型！=“undefined”&&opt_position.indexOf（“bottom”）！=-1）？curobj.offsetHeight:0） subobj.style.left=xpos+“px” subobj.style.top=ypos+“px” 返回错误 } 其他的 返回真值 }

a{font:normal 12px arial；边距：0 20px 0；}
a:悬停{文本装饰：无；}
.菜单{位置：绝对；显示：无；背景：玉米丝；填充：4px；边距：2px 0；边框：1px纯银；字体：普通11px arial；}

菜单1
菜单2
菜单3所需的更改如下：


我们需要添加代码隐藏菜单每当用户点击外面


添加代码以阻止每次单击链接时出现事件冒泡，因为我们需要在单击链接时显示菜单，为此，我们只需将事件传递到
overlay
函数并添加
event.stopPropagation（）

。。。函数的其余部分将是相同的


将事件从HTML传递到
overlay
函数



以下是工作演示-：

希望能有帮助
 嘿。。。有用吗？谢谢。这很好，但是。菜单可以超过三个，然后需要再次编辑代码。而且该代码在IE 11.0中也不起作用，因为它是为3个菜单严格设计的。如果添加了另一个菜单，则必须编辑脚本。
document.addEventListener("click", () => {
    if(document.getElementById("menu1").style.display === "block"){
      document.getElementById("menu1").style.display = "none";
    }
    if(document.getElementById("menu2").style.display === "block"){
        document.getElementById("menu2").style.display = "none";
    }
    if(document.getElementById("menu3").style.display === "block"){
        document.getElementById("menu3").style.display = "none";
    }
})

function overlay(e, curobj, subobjstr, opt_position) {
    e.stopPropagation();
    if (document.getElementById){
        var subobj=document.getElementById(subobjstr)
        subobj.style.display=(subobj.style.display!="block")? "block" : "none"

<a href="#" onClick="overlay(event, this, 'menu1', 'leftbottom')">link1</a>
<a href="#" onClick="return overlay(event, this, 'menu2', 'leftbottom')">link2</a>
<a href="#" onClick="return overlay(event, this, 'menu3', 'rightbottom')">link3</a>