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