javascript - 如何补充脚本，以便通过在其外部单击来隐藏菜单？

Question

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

function getposOffset(overlay, 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;
}
return totaloffset;
}

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

var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) 
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}

a {font: normal 12px arial; margin: 0 20px 0 0;}
a:hover {text-decoration: none;}
.menu {position: absolute; display: none; background: cornsilk; padding: 4px; margin: 2px 0; border: 1px solid silver; font: normal 11px arial;}

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

<div id="menu1" class="menu">menu1</div>
<div id="menu2" class="menu">menu2</div>
<div id="menu3" class="menu">menu3</div>

jsfiddle example

如何通过单击菜单外部来额外隐藏菜单？谢谢。

Answer 1

需要进行的更改如下:

• 我们需要添加代码以在用户点击外部时隐藏菜单...

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";
    }
})

• 添加代码以在单击链接时阻止事件冒泡，因为我们需要在单击链接时显示菜单，为此我们只需将事件传递到 overlay 函数并添加 事件。 stopPropagation()...

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"

... rest of the function will be same...

• 将事件从 HTML 传递到 overlay 函数...

<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>

这是工作演示 -: https://jsfiddle.net/bhza0tLx/12/

希望有帮助......