# 高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啊什么的

我们先来试一下啊

我们把红色的这个元素

给加上这个样式

哎大家看这样就可以了

但是呢现在还不行

因为他点击按钮也不行了

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

打开这样就可以了

我们再把颜色去掉

就完美解决了


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET 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?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.