CSS pointer-events 介绍，使用场景，注意点

CSS pointer-events 属性用于控制元素是否可以响应鼠标事件（例如点击、悬停、拖拽等）。该属性可以应用于任何 HTML 元素，并且具有以下几个可能的取值：

1. auto：默认值。元素正常响应鼠标事件。

2. none：元素不响应鼠标事件，事件会穿透到元素下面的元素。

3. visiblePainted：元素不响应鼠标事件，但是会触发鼠标样式的改变（如手型指针）。

4. visibleFill：元素不响应鼠标事件，鼠标事件仍然会穿透到元素下面的元素，但是会触发鼠标样式的改变。

5. visibleStroke：元素不响应鼠标事件，鼠标事件仍然会穿透到元素下面的元素，但是会触发鼠标样式的改变。

使用场景：

• 事件屏蔽（Block Events）：在某些情况下，您可能希望阻止特定元素响应鼠标事件，而让其下面的元素处理事件。通过将 pointer-events: none; 应用于该元素，您可以实现这一点。

• 图像上的交互：在某些情况下，您可能有一个带有透明部分的图像，希望仅在非透明部分上触发交互，可以使用 pointer-events: visiblePainted;。

• 自定义样式：有时候希望当用户悬停在元素上时更改鼠标样式，但是不希望元素本身响应事件。这时可以使用 pointer-events: visibleFill; 或 pointer-events: visibleStroke;。

注意点：

• pointer-events 并不是 CSS2 规范的一部分，而是 CSS3 规范的一部分。因此，在某些较旧的浏览器中可能不受支持。

• 当您使用 pointer-events: none; 时，元素及其子元素都将不响应鼠标事件。如果您希望某些子元素仍能够响应事件，可以对这些子元素单独设置 pointer-events: auto;。

• 虽然可以使用 pointer-events 来阻止鼠标事件，但是对于键盘事件，无法通过 CSS 来禁用。因此，仍然需要在 JavaScript 中进行处理来防止键盘交互。

• 在使用 pointer-events 时，要注意可能会影响到网页的可访问性。一些用户可能依赖键盘或辅助设备进行交互，因此请确保不会完全屏蔽所有用户的交互能力。