pointer-events

pointer-events 是一个 CSS 属性，用于控制元素在用户与页面进行交互时的鼠标事件响应方式。它可以应用于任何 HTML 元素：

1. auto（默认值）: 元素会按照正常的鼠标事件规则进行响应，即可以触发鼠标事件。
2. none: 元素不会响应鼠标事件，鼠标事件将会穿透该元素并传递给其下面的元素。
3. visiblePainted: 元素不会响应鼠标事件，但是会显示鼠标指针样式，并且鼠标事件可以被下面的元素响应。
4. visibleFill: 元素不会响应鼠标事件，但是会显示鼠标指针样式，并且鼠标事件可以被下面的填充元素响应。
5. visibleStroke: 元素不会响应鼠标事件，但是会显示鼠标指针样式，并且鼠标事件可以被下面的描边元素响应。
6. visible: 元素会响应鼠标事件，并显示鼠标指针样式。

以下是一个使用 pointer-events 属性的示例代码：

htmlCopy code
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    pointer-events: none;
  }

  .inner {
    width: 100px;
    height: 100px;
    background-color: lightgreen;
  }
</style>

<div class="box">
  <div class="inner"></div>
</div>

在上述代码中，父元素 .box 的 pointer-events 属性被设置为 none，这意味着该元素不会响应鼠标事件。子元素 .inner 则没有设置 pointer-events 属性，因此它会按照默认行为响应鼠标事件。

实际使用

1. pointer-events属性可以用于创建可点击区域的非矩形形状。通过设置元素的shape-outside属性为polygon()或path()，并将pointer-events设置为fill或visible，可以使非矩形区域响应鼠标和触摸事件。
2. 使用pointer-events: none;可以禁用元素的交互性，使其无法点击或触摸。这在某些情况下很有用，比如在元素被覆盖时避免触发不必要的事件。
3. 当需要将一个元素放置在另一个元素上方，并且希望鼠标事件能够透过上层元素传递到下层元素时，可以将上层元素的pointer-events属性设置为none。
4. pointer-events属性在移动设备上也适用于触摸事件。通过设置pointer-events为none，可以禁止触摸事件的响应，从而防止用户与特定元素进行交互。
5. 要注意的是，pointer-events属性的兼容性可能存在差异。在使用时，最好在目标浏览器上进行兼容性测试，以确保所需效果能够正常工作。

需要注意的是，pointer-events 属性并不是 CSS 的标准特性，它是一个非标准的属性，但已经被主流的浏览器所支持。在使用时，建议对浏览器兼容性进行测试，以确保在不同的浏览器中正常工作。