CSS - pointer-events 属性
CSS pointer-events 属性用于控制元素如何响应指针事件，例如鼠标点击、鼠标悬停和鼠标移动。它允许您指定元素是否应该接收指针事件，以及这些事件是否应该触发点击或悬停等操作。
可能的值
auto − : 这是默认值。它表示元素按正常方式行为，并根据其指定的 CSS 属性和内容响应指针事件。在 SVG 内容中，此值与 visiblePainted 效果相同。
none − 此值表示元素不应响应指针事件。点击、悬停效果和其他交互将穿透元素，仿佛它不存在，下方的元素将接收这些事件。
visiblePainted − 此值表示元素仅在可见的绘制区域被触发时接收指针事件。元素内的透明区域不响应指针事件。
visibleFill − 与 visiblePainted 类似，此值表示元素仅响应在可见绘制区域或填充区域触发的指针事件，忽略透明区域的指针事件。
visibleStroke − 与 visiblePainted 和 visibleFill 类似，此值表示元素仅响应在可见绘制区域或描边区域触发的指针事件，忽略透明区域的指针事件。
visible − 仅当 visibility 设置为 visible 时针对指针事件，且鼠标光标位于其内部（fill）或周边（stroke）上方，fill 和 stroke 值不影响事件处理。
painted − 此值表示元素仅响应在其绘制内容上触发的指针事件。元素内的透明区域不响应指针事件。
fill − 与 painted 类似，此值表示元素仅响应在其填充上触发的指针事件，忽略透明区域的事件。
stroke − 与 painted 和 fill 类似，此值表示元素仅响应在其描边上触发的指针事件，忽略透明区域的事件。
all − 当指针位于其内部（fill）或周边（stroke）上方时针对指针事件。fill、stroke 和 visibility 属性值不受影响。
适用元素
所有元素。
语法
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all;
注意事项
当此属性未定义时，SVG 内容具有与 visiblePainted 值相同的属性。
none 值不仅使元素不再是 pointer event 的目标，还允许事件穿透，针对元素下方的内容。
使用 pointer-events 在元素上禁用指针事件并不意味着事件监听器不会被触发。如果该元素的子元素启用了 pointer-events 以允许其成为事件目标，针对子元素的事件将通过父元素传递，可能触发事件监听器。但是，如果指针活动发生在仅由父元素覆盖的区域，则子元素和父元素都会错过该事件。
具有 pointer-events: none 的元素仍然可以通过 Tab 键的顺序键盘导航获得焦点。
CSS pointer-events - none 值
以下示例演示了 pointer-events: none 属性如何禁用超链接的点击 −
<html>
<head>
<style>
a[href="https://_css_pointer-event.com"] {
pointer-events: none;
}
</style>
</head>
<body>
<a href="https://_css_pointer-event.com">css_pointer-event</a>
</body>
</html>
CSS pointer-events - auto 值
以下示例演示了 pointer-events: auto 属性允许锚元素可被点击 −
<html>
<head>
<style>
a[href="https://_css_pointer-event.com"] {
pointer-events: auto;
}
</style>
</head>
<body>
<a href="https://_css_pointer-event.com">css_pointer-event</a>
</body>
</html>
CSS pointer-events - 在图像上禁用 Pointer Events
以下示例演示了 pointer-events: none 属性在图像上禁用 pointer events（点击、悬停等） −
<html>
<head>
<style>
img {
height: 100px;
width: 100px;
pointer-events: none;
}
</style>
</head>
<body>
<img src="images/pink-flower.jpg" alt="pink-flower">
</body>
</html>