# 高z-index的容器空白处点击事件被吸收的问题处理

* 抖音：[https://v.douyin.com/hJG9b9Y/](https://v.douyin.com/hJG9b9Y/)
* B站：[https://www.bilibili.com/video/BV1p24y1k7gQ/](https://www.bilibili.com/video/BV1p24y1k7gQ/)

> **Demo预览：**
>
> [https://sunzsh.github.io/html-demos/map.html](https://sunzsh.github.io/html-demos/map.html)
>
> **代码 / 文件：**
>
> [https://github.com/sunzsh/st-html-demo/blob/master/map.html](https://github.com/sunzsh/st-html-demo/blob/master/map.html)

大家看啊这是一个全屏地图的页面

现在问题是什么呢

就是上面这几个横着的按钮啊

当我们点击他们中间的间隙的时候

大家看这没办法触发地图的事件

点下边可以

包括这个大的空隙

大家看都不行

为什么呢

原因是布局问题

因为有可能这些按钮后期要动态增加

所以呢我把他们这些按钮啊

放在了一个横向的大容器里边

大家看就这个红色的容器里边

所以当我们点击中间那个间隙的时候

啊其实啊

这个点击事件

是被这个红色容器所吸收了

那怎么处理呢

碰到这个问题

我就突然想到之前一个小伙伴发的bug

他就是用这个pointer-events来解决的

什么意思呢

就是这个样式啊

它可以禁用HTML元素的鼠标事件

包括click啊mouse move啊什么的

我们先来试一下啊

我们把红色的这个元素

给加上这个样式

哎大家看这样就可以了

但是呢现在还不行

因为他点击按钮也不行了

所以呢我们再把点击按钮给他改回来

打开这样就可以了

我们再把颜色去掉

就完美解决了
