原生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; 
}