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

 

转载于:https://www.cnblogs.com/HarkPark/p/9139216.html