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