如何捕捉“关闭”点击事件？

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

但是菜单打开后立即关闭。 首先，当单击“星号”时，它变为“块”。 但是，在此之后，由于单击了主体，因此“无”。 怎么解决呢？ 是否真的有必要为“ body”编写代码以捕获正确的目标事件？

Answer 1

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

Answer 2

这是由于冒泡/事件传播。 #star上的侦听器#star触发，然后事件冒泡到身体，然后在那里触发。

您需要取消事件传播。 不幸的是，使用没有库的内联处理程序并不是特别容易。

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(e) {
    e = e || window.event;
    if (e.stopPropagation) {
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }

    y.style.display = "block";
}