原生JS之事件:实现点击空白区域弹窗部分消失 您所在的位置:网站首页 js点击弹窗外渐变关闭弹窗 原生JS之事件:实现点击空白区域弹窗部分消失

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

2024-05-14 15:29| 来源: 网络整理| 查看: 265

在移动端开发中,我们经常会需要做这样一个功能:遇到弹出一个窗口,点击空白区域这个弹出消失,而这个弹出还是可以操作的。

事件的理解

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

 



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有