> For the complete documentation index, see [llms.txt](https://sunzsh.gitbook.io/xiaoshan.bug/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sunzsh.gitbook.io/xiaoshan.bug/gao-zindex-de-rong-qi-kong-bai-chu-dian-ji-shi-jian-bei-xi-shou-de-wen-ti-chu-li.md).

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

* 抖音：<https://v.douyin.com/hJG9b9Y/>
* B站：<https://www.bilibili.com/video/BV1p24y1k7gQ/>

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

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

现在问题是什么呢

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

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

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

点下边可以

包括这个大的空隙

大家看都不行

为什么呢

原因是布局问题

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

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

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

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

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

啊其实啊

这个点击事件

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

那怎么处理呢

碰到这个问题

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

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

什么意思呢

就是这个样式啊

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

包括click啊mouse move啊什么的

我们先来试一下啊

我们把红色的这个元素

给加上这个样式

哎大家看这样就可以了

但是呢现在还不行

因为他点击按钮也不行了

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

打开这样就可以了

我们再把颜色去掉

就完美解决了