面试被问到一个css属性，我却只会向面试官输出js解决方案。。。
事情是这样的，好不容易约到个面试，虽然是线下，还是开心得屁颠屁颠跑去面了。刚开始都很正常，面试官首先问一些关于css的问题，我都能对答如流，觉得还好，突然面试官说，有这么个场景：如果我现在有个 canvas 的区域，区域下方（重叠那种上下，不是二维的上下）是一些操作按钮，但是按钮在该区域下方，不能显示出来，怎么能够点击到按钮呢？
听到问题我一开始没反应过来，不是还在疯狂问css吗，怎么突然跳跃到canvas了？于是我就回：不好意思，canvas我不是特别熟。。。，面试官就说不关canvas的事，这样吧，你就把canvas想象成一张普通的图片，怎么能点击到图片下方的按钮呢？
思索片刻，难道面试官在考察我的JS基础了？我就很自信的回答：首先把按钮所在标签放到图片所在标签之下，再把图片的层级（z-index）设置比按钮高一点，这样按钮就被图片挡着不会显示出来，再给按钮和图片所在标签都加上点击事件，此时就可以通过事件冒泡处理按钮的事件了。说完我就非常有把握的看向面试官，以为稳了。但是面试官好像不太满意，于是添加条件说，那如果按钮和图片所在标签不是父子节点关系呢，没有这层关系，你就不能使用事件冒泡了，此时怎么处理？答曰：不知道。。。
回来后赶紧查资料，原来一个css属性就搞定了：pointer-events: none; 这才是面试官想要的答案。
pointer-events是一个CSS属性，它定义了在何种情况下元素可以成为鼠标事件（或触摸事件）的目标。这个属性可以控制元素是否可以被点击、是否可以触发鼠标事件，或者是否应该忽略鼠标事件，让事件传递给下面的元素。
使用场景
pointer-events属性主要用于以下几种场景：
- : 元素不会成为鼠标事件的目标。例如，如果想让一个元素透明对用户的点击，可以将其
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>
来源：juejin.cn/post/7320169906221826048
