原生JS之事件：实现点击空白区域弹窗部分消失

在移动端开发中，咱们常常会须要作这样一个功能：遇到弹出一个窗口，点击空白区域这个弹出消失，而这个弹出仍是能够操做的。

事件的理解

js是事件驱动的，全部的动做都是在事件里面发生的，全部咱们首先必须理解事件的执行过程。

一个事件的发生包括两个部分：事件的捕获与事件的执行。事件的捕获是从外到内，就是经过DOM的层级关系，从html直到找到当前执行事件的DOM元素；事件的执行是从内到外，经过事件的冒泡，从当前DOM元素一直到html。

功能实现的基本思路

咱们要实现点击document的全部DOM元素而不包括弹窗自己实现关闭弹窗效果，咱们就能够给document.body绑定一个click事件，执行时关闭弹窗。这样点击document内的全部DOM元素，都会冒泡到document.body上，从而实现关闭弹窗效果。要阻止弹窗自己，则只须要让弹窗不能冒泡就能够了。

//得到弹窗
let tc = document.getElementById("tc");
document.body.onclick = function() {
     tc.style.display = "none"
}
tc.onclick = function(event){
 //兼容IE低版本
  event.stopPropagation();
  event.cancelBubble = true; 
}