关于js的冒泡--新手踩坑案例

先通过一段html代码了解各个div的从属关系

<div id='wrapper' class="wrapper"><button id="clickMe">点我</button><div id='popover' class="popover">浮层</div>
</div>
复制代码

要实现的功能是

通过button按钮点击后打开浮层

采用对button添加监听事件，默认隐藏浮层，在用户点击后展示浮层。

点击页面空白区域关闭浮层实现过程如下所示

1. 监听body

首先考虑对body对象添加监听，内容为点击后隐藏浮层。发现无效后通过对body添加边框看到body高度是根据其内容变化的，所以只占屏幕上方很小一部分。

2. 监听document

同样无效。经分析，在冒泡阶段先触发按钮事件，但因同时存在对document的监听，紧接着触发document监听，所以仍然无法显示图层。
进一步思考后，对wrapper添加e.stopPropagation，即停止传播，由此可阻断冒泡，即可实现上述功能。

clickMe.addEventListener('click', function(e){popover.style.display = 'block'
})
wrapper.addEventListener('click', function(e){e.stopPropagation()
})
document.addEventListener('click', function(){popover.style.display = 'none'
})
复制代码

3. 以上虽然可实现需求，但添加的监听器过多，考虑减少内存的使用，可进行优化：

将对document的监听全部添加到click事件的内部，并使用one方法只监听一次点击事件。

$(clickMe).on('click', function() {$(popover).show()$(document).one('click', function() {$(popover).hide()})
})
$(wrapper).on('click', function(e){e.stopPropagation()
})
复制代码

需注意，在3中若删除阻断，仍会出现bug，若执意删除，则需更改代码如下：

$(clickMe).on('click', function() {$(popover).show()setTimeout(function() {$(document).one('click', function() {$(popover).hide()})}, 0)
})
复制代码

上述代码中，将document监听放在setTimeout函数中，这里的setTimeout作用在于让其中的内容尽快执行而不是立即执行，若不添加则在button被点击之后会立即调用show和监听，此时会立即对popover绑定hide，在冒泡阶段便会依序执行show和hide，造成bug。

关于js的冒泡--新手踩坑案例相关推荐

微信支付『支付失败,如果已扣款,资金在0-3个工作日原路返回』踩坑案例及解决方案
微信支付『支付失败,如果已扣款,资金在0-3个工作日原路返回』踩坑案例及解决方案参考文章: (1)微信支付『支付失败,如果已扣款,资金在0-3个工作日原路返回』踩坑案例及解决方案 (2)https: ...
protoc cpp_out 新手踩坑
protoc cpp_out 新手踩坑 1.protoc cpp_out =./ *.proto 对'google::protobuf::Message:: ** 未定义的引用 : error: '* ...
从一道面试题说起—js隐式转换踩坑合集
前方提醒: 篇幅较长,点个赞或者收藏一下,可以在下一次阅读时方便查找提到js的隐式转换,很多人第一反应都是:坑. 的确,对于不熟悉的人来说,js隐式转换存在着很多的让人无法预测的地方,相信很多人都深 ...
[新手踩坑]k8s部署遇到的问题及可参考的解决办法
1.部署流程项目需要最近在了解k8s,尝试使用虚拟机模拟集群环境,结合了不同的部署教程,给出一个基本的安装流程,以及遇到的问题. 安装环境:windows10+vmware(模拟集群环境)+ ...
如何高效排查系统故障？一分钱引发的系统设计“踩坑”案例
阿里妹导读:阿里巴巴的电商业务十分复杂,一方面是市场多样化,业务多样化,另外是消费者,商家的影响面非常广,任何一个小故障都可能引发一些社会问题,所以阿里对产品的质量,对服务的连续性有严格的要求.阿里技 ...
使用video.js 播放youtube视频——踩坑记1
支持: youtube.com以及youtu.be 常规网址:http://www.youtube.com/watch?v = xjS6SftYQaQ 嵌入式网址:http://www.youtube ...
「前任的50种死法」开发踩坑案例--慢就是错
背景 <50 ways to say goodbye>中文名<前任的50种死法>是我之前报的英语班里外教老师放给我们听的歌.老外说很困惑为什么我们还在听<Take me ...
js散度python代码踩坑
方式1:需要聚合出结果 (输入的为某个值) import pandas as pd import numpy as np import scipy.stats as ss# 忽略警告 import w ...
第07课：基于 Redis 的分布式锁实现及其踩坑案例
分布式锁的实现,目前常用的方案有以下三类: 数据库乐观锁: 基于分布式缓存实现的锁服务,典型代表有 Redis 和基于 Redis 的 RedLock: 基于分布式一致性算法实现的锁服务,典型代表有 ...