点击空白地方关闭弹窗

<div id="mask">
        <div id="content">
            <button id="btn">
                点我关闭
            </button>
        </div>
    </div>
    <script>
        const mask = document.getElementById('mask');
        const content = document.getElementById('content');
        const btn = document.getElementById('btn');

        btn.onclick = function() {
            content.style.display = 'none';
        }
        
      // 在蒙层上加上监听事件，若是当前的currenttarget 和target相等，则是点击在蒙层上
        mask.addEventListener('click',function(e) {
            if(e.currentTarget === e.target){
                content.style.display = 'none';
            }
        },false)
    </script>

这个点击空白区域关闭弹窗的原理主要是： 判断点击的目标是否在除自身以外的蒙层上；但如何能判断这个呢？事件里有两个属性，一个是target,一个是currentTarget,二者区别主要是：target是作用在目标元素上，而currentTarget则是作用在监听元素上，所以，在蒙层上设一个监听事件，当鼠标点击在蒙层上时，就可以关闭弹窗；