高z-index的容器空白处点击事件被吸收的问题处理
Demo预览：
https://sunzsh.github.io/html-demos/map.html
代码 / 文件：
大家看啊这是一个全屏地图的页面
现在问题是什么呢
就是上面这几个横着的按钮啊
当我们点击他们中间的间隙的时候
大家看这没办法触发地图的事件
点下边可以
包括这个大的空隙
大家看都不行
为什么呢
原因是布局问题
因为有可能这些按钮后期要动态增加
所以呢我把他们这些按钮啊
放在了一个横向的大容器里边
大家看就这个红色的容器里边
所以当我们点击中间那个间隙的时候
啊其实啊
这个点击事件
是被这个红色容器所吸收了
那怎么处理呢
碰到这个问题
我就突然想到之前一个小伙伴发的bug
他就是用这个pointer-events来解决的
什么意思呢
就是这个样式啊
它可以禁用HTML元素的鼠标事件
包括click啊mouse move啊什么的
我们先来试一下啊
我们把红色的这个元素
给加上这个样式
哎大家看这样就可以了
但是呢现在还不行
因为他点击按钮也不行了
所以呢我们再把点击按钮给他改回来
打开这样就可以了
我们再把颜色去掉
就完美解决了
最后更新于