如何同时实现点击按钮出现或回收下拉菜单和点击盒子外部也回收下拉菜单？？

Question

如题

        <div class="header-dropdown">
            <button onclick="dropdown()" class="header-dropbtn" id="header-dropdown-btn">下拉菜单</button>
            <div id="header-dropdown" class="header-dropdown-content"></div>

js片段如下

function dropdown() { //切换
    document.getElementById('header-dropdown').classList.toggle('show');
}

var dropdowns = document.getElementsByClassName('header-dropdown-content')[0];
var i;
for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdown[i];
    if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
    };
};

document.querySelector('.header-dropbtn').addEventListener('click', function(e) {
    document.querySelector('.header-dropdown').classList.add('show');
    e.stopPropagation(); //阻止冒泡
}, false);

document.querySelector('.header-dropdown').addEventListener('click', function(e) {
    e.stopPropagation();
}, false);

document.addEventListener('click', function() {
    document.querySelector('.header-dropdown').classList.remove('show');
}, false); 

已经实现了点击出现或恢复事件，如何在此基础上实现点击盒子外部也回收下拉菜单

Answer 1

页面可以加个透明的遮罩