面试被问到一个css属性，我却只会向面试官输出js解决方案。。。-CSDN博客

本文链接：https://blog.csdn.net/Likestarr/article/details/135620886

文章讲述了面试者在面试中遇到的问题，需解决在Canvas区域下方不可见的按钮点击问题。通过JavaScript和CSS的pointer-events属性，揭示了如何让事件穿透遮罩元素，实现按钮点击。

摘要由CSDN通过智能技术生成

事情是这样的，好不容易约到个面试，虽然是线下，还是开心得屁颠屁颠跑去面了。刚开始都很正常，面试官首先问一些关于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属性，点击事件会“穿透”该元素并可触发下面元素的事件，即按钮点击事件就可以被触发了！！！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .outer{
    position: relative;
    width: 200px;
    height: 200px;
  }
  .mask{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .7);
    pointer-events: none; 
  }
</style>
<body>
  <div class="outer">
    <div class="mask"></div>
    <button id="btn">click</button>
  </div>
  <script>
    const btn = document.getElementById('btn')
    btn.addEventListener('click', function(e){
      console.log('click');
    })
  </script>
</body>
</html>