pointer-events 是 CSS 中一个用于控制元素响应鼠标事件（或触摸事件）的属性。
通过这个属性，我们可以控制元素是否能够接受鼠标事件，例如点击、悬停、拖动等。
其中，pointer-events: none 是 pointer-events 属性的一个重要值，常用于让元素忽略所有的指针事件，使得这些元素无法被点击或响应其他交互。
1. pointer-events属性概述
pointer-events 属性控制一个元素是否能够接收用户的指针事件。指针事件通常指鼠标点击、悬停、拖动，或者触摸事件等。这些事件可以用来触发元素的交互，例如按钮点击、链接跳转、元素拖动等。
pointer-events的常见值
auto：元素可以正常接收鼠标事件（默认值）。
none：元素不会响应任何鼠标事件或触摸事件，所有指针事件都会被忽略。
visiblePainted、visibleFill、visibleStroke 等：这些值更多是 SVG 场景中的特定用法。
fill、stroke：这些值适用于 SVG 元素，用来控制元素的填充区域和描边区域是否响应指针事件。
2.pointer-events: none 的工作原理
当你使用 pointer-events: none 属性时，目标元素会完全忽略所有的鼠标事件。换句话说，任何用户在该元素上的操作（如点击、拖动等）都不会引发事件，也不会影响页面的交互。
这意味着该元素完全“透明”于鼠标事件，任何在该元素上发生的交互都会被视作发生在其下方的元素上。例如，如果你在一个具有 pointer-events: none的按钮上点击，点击事件会传递到该按钮下方的元素上（如果下方的元素是可点击的）。
<div style="width: 200px; height: 200px; background-color: red; pointer-events: none;">我是一个不可点击的红色块。
</div>
<div style="width: 200px; height: 200px; background-color: blue;">我是一个可点击的蓝色块。
</div>在这个例子中，点击红色块并不会触发任何事件，因为它的 pointer-events被设置为 none。而点击蓝色块则会触发相应的点击事件。
3. 使用 pointer-events: none 的常见应用场景
1. 禁用按钮和链接
pointer-events: none 可以用来禁用页面中的按钮或链接。例如，当一个操作正在进行时，我们可能希望禁用相关的按钮，防止用户重复点击或干扰。
<button style="pointer-events: none;">正在处理中...</button>在上面的代码中，按钮虽然显示在页面上，但由于 `pointer-events: none`，用户无法点击它。这通常用于显示加载状态或防止多次提交表单。
2. 使元素不可点击（但不改变其样式）
某些情况下，我们希望元素依旧可见，并且其外观不变，但不希望用户对其进行交互。例如，一些弹出层、悬浮框或提示框，在关闭之前可能需要禁用页面上的所有交互。
<div style="pointer-events: none;"><p>页面上的所有交互元素已被禁用。</p>
</div>在此情况下，pointer-events: none被应用于整个容器，使得容器内的所有元素（例如文本、按钮、链接等）都不会响应任何指针事件。与此同时，这些元素的视觉效果保持不变，仍然会显示在页面上。
3. 交互元素下的透明遮罩层
pointer-events: none 可以配合透明的遮罩层使用，使得遮罩层不会阻挡下面的交互元素。具体应用包括一些需要视觉上的覆盖效果，但不干扰用户操作的情况。
<div style="position: relative;"><button>点击我</button><div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); pointer-events: none;"><!-- 透明遮罩层，阻挡用户看见元素，但不阻挡交互 --></div>
</div>在这个例子中，透明的遮罩层覆盖在按钮上，但由于 pointer-events: none，它不会拦截对按钮的点击事件。用户仍然能够点击按钮，尽管按钮被遮罩覆盖。
4. 使 SVG 图形元素响应或不响应事件
在 SVG 中，pointer-events 属性的值能够控制图形元素的交互行为。对于一些图形元素，如果你不希望它们响应鼠标事件（如点击或悬停），你可以使用pointer-events: non
<svg width="100" height="100"><circle cx="50" cy="50" r="40" style="fill: red; pointer-events: none;" />
</svg>在上面的例子中，红色的圆形不会响应鼠标点击或其他指针事件，即使它在页面上是可见的。
