CSS 图层点击穿透

在本文中，我们将介绍如何使用 CSS 实现图层点击穿透，并提供示例来帮助理解。

阅读更多：CSS 教程

什么是图层点击穿透？

在 CSS 中，图层点击穿透是指当一个元素覆盖在另一个元素之上时，鼠标点击事件能够透过顶层元素，直接作用在底层元素上。这使得我们可以在页面上实现一些有趣的效果，比如点击透明的遮罩层来触发底下的按钮等。

CSS 中的指针事件

在了解图层点击穿透之前，我们需要先了解 CSS 中的指针事件。CSS 中有四个与指针事件相关的属性：pointer-events、cursor、touch-action 和 will-change。

pointer-events 属性

pointer-events 属性用来定义元素对指针事件的反应方式。常用的取值有以下几种：

auto：默认值，元素响应指针事件；
none：元素不响应指针事件，事件会向下传递到下一层的元素；
inherit：继承父元素的 pointer-events 属性值。

cursor 属性

cursor 属性定义鼠标指针在元素上的形状。当元素响应指针事件时，常用于改变鼠标样式以提醒用户可以和该元素进行交互。

touch-action 属性

touch-action 属性规定某个给定元素是否可被用户操作。常用的取值有以下几种：

auto：默认值，元素可被用户操作；
none：元素不可被用户操作，事件会向下传递到下一层的元素；
manipulation：元素可被用户操作，但会阻止浏览器默认的滚动、缩放等手势。

will-change 属性

will-change 属性规定元素会发生改变的属性，以便浏览器为该元素做一些优化，比如创建图层等。

实现图层点击穿透的方法

实现图层点击穿透可以通过以下两种方法：使用 pointer-events 属性和使用 event.target。

使用 pointer-events 属性

通过将顶层元素的 pointer-events 属性值设为 none，可以使该元素不响应指针事件，并将事件透传给底层元素。以下是一个示例：

<style>
#top-layer {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  cursor: pointer;
}

#bottom-layer {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

</style>
<div id="top-layer"></div>
<div id="bottom-layer"></div>

在这个示例中，#top-layer 是一个透明的遮罩层，#bottom-layer 是位于遮罩层下面的一个红色方块。由于 #top-layer 的 pointer-events 属性被设置为 none，当用户点击遮罩层时，实际上是点击了底下的红色方块，从而触发了 #bottom-layer 上面绑定的点击事件。

使用 event.target

另一种实现图层点击穿透的方法是使用 event.target。当一个元素上绑定了点击事件，而点击事件发生在该元素下面的其他元素上时，可以通过 event.target 获取真正被点击的元素，从而模拟图层点击穿透的效果。以下是一个示例：

<style>
#top-layer {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

#bottom-layer {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

</style>
<div id="top-layer" onclick="handleClick(event)"></div>
<div id="bottom-layer"></div>
<script>
function handleClick(event) {
  if (event.target.id === 'top-layer') {
    // 处理点击事件
    console.log('点击了遮罩层');
  } else {
    console.log('点击了底层元素');
  }
}
</script>

在这个示例中，当用户点击遮罩层时，通过判断 event.target 的 id，我们可以确定用户实际点击的是遮罩层还是底层元素，从而执行相应的逻辑。