javascript - 如何捕获 "closing"点击事件？

Question

这是一个例子。这是 Google 菜单。

当您单击齿轮(红十字)时，会出现菜单。当您单击打开的菜单(绿色十字)之外的任何位置时，菜单就会消失。问题是如何捕获第二个结束事件(绿色十字)。

打开菜单很简单。

var x = document.getElementById("star");          // this is id of the gear-wheel;
var y = document.getElementById("hiddenMenu");    // this is id of the menu with display = none;
x.onclick = function() {
    y.style.display = "block";
}

但是如何让它关闭呢？我使用“body”标签尝试了这种方式:

var bar = document.getElementsByTagName("body")[0];
bar.onclick = function() {
    if (y.style.display == "block") {
       y.style.display = "none";
    }
}

但是菜单打开后立即关闭。首先，当点击“星”时，它会变成“ block ”。但此后立即变为“无”，因为主体也被单击。怎么解决呢？真的有必要为“body”编写代码来捕获正确的目标事件吗？

Answer 1

star.addEventListener("click", closeIfOpen);
document.addEventListener("click", closeIfClickOutsideMenu);