Document

--- theme: fancy --- 事情是这样的，好不容易约到个面试，虽然是线下，还是开心得屁颠屁颠跑去面了。刚开始都很正常，面试官首先问一些关于css的问题，我都能对答如流，觉得还好，突然面试官说，有这么个场景：**如果我现在有个 canvas 的区域，区域下方（重叠那种上下，不是二维的上下）是一些操作按钮，但是按钮在该区域下方，不能显示出来，怎么能够点击到按钮呢？** 听到问题我一开始没反应过来，不是还在疯狂问css吗，怎么突然跳跃到canvas了？于是我就回：不好意思，canvas我不是特别熟。。。，面试官就说不关canvas的事，这样吧，你就把canvas想象成一张普通的图片，怎么能点击到图片下方的按钮呢？思索片刻，难道面试官在考察我的JS基础了？我就很自信的回答：首先把按钮所在标签放到图片所在标签之下，再把图片的层级（z-index）设置比按钮高一点，这样按钮就被图片挡着不会显示出来，再给按钮和图片所在标签都加上点击事件，此时就可以通过事件冒泡处理按钮的事件了。说完我就非常有把握的看向面试官，以为稳了。但是面试官好像不太满意，于是添加条件说，那如果按钮和图片所在标签不是父子节点关系呢，没有这层关系，你就不能使用事件冒泡了，此时怎么处理？答曰：不知道。。。回来后赶紧查资料，原来一个css属性就搞定了：`pointer-events: none;` 这才是面试官想要的答案。 `pointer-events`是一个CSS属性，它定义了在何种情况下元素可以成为鼠标事件（或触摸事件）的目标。这个属性可以控制元素是否可以被点击、是否可以触发鼠标事件，或者是否应该忽略鼠标事件，**让事件传递给下面的元素**。 #### 使用场景 `pointer-events`属性主要用于以下几种场景： - **None**: 元素不会成为鼠标事件的目标。例如，如果想让一个元素透明对用户的点击，可以将其`pointer-events`设置为`none`。 - **Auto**: 默认值。元素正常响应鼠标事件。 - **VisiblePainted**: 元素仅在可见部分响应鼠标事件。 - **其他值**: 还有一些其他值用于SVG元素，如`visibleFill`, `visibleStroke`, `painted`, 等。 #### 示例 ****** 以下例子和上述试题很像，把mask当做一张图片，为了方便展示，为其设置了透明度，这样能看到具体按钮位置和展示层级关系。正常情况下点击按钮是不会触发click事件的，因为mask的层级更高，完全遮住了按钮，鼠标只会点击到mask，但若此时为其加上`pointer-events: none`属性，点击事件会“穿透”该元素并可触发下面元素的事件，即按钮点击事件就可以被触发了！！！ ```html Document

``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c291b534798c44eeb40d39d6be5aa677~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=458&h=474&s=18906&e=png&b=4c4c4c)