如何创建一个不限制“点击”，“悬停”和“选择”事件透明层？

Question

在当前Github网站，有一个显示/隐藏轮廓菜单切换能力。在下面的屏幕截图，有全宽度和高度菜单后面一个transparent layer并举例来说，如果我点击“浏览”，我的第一次点击就会触发透明层的onclick事件，它只会隐藏菜单和透明层本身。然后，我需要在“资​​源管理器”再次单击做出行动。

但在目前的stackoverflow网站，有没有上述限制类似的切换能力，当菜单打开时，我可以像一个正常的网页没​​有任何限制Select，Hover和click。

在这两个网站，当你按一下周围，菜单将关闭，但我无法找到任何transparent layer和stackoverflow我不知道这些是使用类似的方法。

当我知道有几种方法来解决这些问题：

Simulate a click by using x,y

这是不正确的答案，因为这样一来，就无法使用hover像什么stackoverflow现在正在做的（你可以hover在菜单后面的任何对象）。

Make an element “invisible” to clicks

这是不正确的答案，因为这样一来，就无法使用onclick事件隐藏菜单本身。

JavaScript to prevent Default action

这是不正确的答案，因为通过这种方式，它是不可能在同一时间使用hover和onclick事件。那么它是不可能的，使它象stackoverflow。

能否请您指导我stackoverflow是如何传递Github限制？

Answer 1

只是不要在所有创建一个透明覆盖。

相反侦听click的document事件，如果它的发射关闭菜单。

document.querySelector('button').addEventListener('click', e => {
  console.log('button clicked')
})

document.addEventListener('click', e => {
  console.log('click reached document, close menu')
})

<div>
 <button>Click me</button>
</div>

Answer 2

首先，你需要使用这样的类来切换菜单：

当它靠近：

<div class="menu">...</div>

当它打开时：

<div class="menu open">...</div>

在CSS：

.menu {
    display: none;
}

.menu.open {
    display: block;
}

那么你需要在文档上添加onclick事件找到所有打开的菜单和删除open类人。

<script type="text/javascript" language="JavaScript">
    document.onclick = closeAllOpenMenus;

    function closeAllOpenMenus() {
        const all_open_menus = document.querySelectorAll(".menu.open");

        [].forEach.call(all_open_menus, function(el) {
            //remove 'open' class
            el.classList.remove("open");
        });
    }
</script>

你需要更多的工作，对上述功能，防止closeAllOpenMenus单击在菜单本身的用户时。