是否曾经有过这样的经历：把一个元素置于另一个元素之上，而希望下面的那个元素成为可点击的？现在，利用css的pointer-events属性即可做到。 CSS pointer-events Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。 将它应用到一个元素 如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面
CSS中的`pointer-events`属性是一个非常实用的特性，它允许开发者控制元素如何响应鼠标交互。在HTML中，当一个元素覆盖了另一个元素时，通常情况下，位于上方的元素会捕获所有的鼠标事件，如点击（click）或悬停（hover）。然而，通过设置`pointer-events`属性为`none`，可以使得上方的元素变得透明于鼠标交互，让鼠标事件能够穿透到下方的元素。
`pointer-events`属性主要有以下几个值：
1. `auto`：默认值，元素会响应鼠标事件。
2. `none`：元素不会响应鼠标事件，鼠标事件会传递给其下的元素。
3. `all`：与`auto`类似，但还包括像`scroll`和`zoom`这样的事件。
4. `fill`、`stroke`、`none`、`visiblePainted`、`visibleFill`、`visibleStroke`、`visible`、`painted`、`stroke`、`fill`等SVG相关的值，这些在HTML元素中通常不适用。
在实际应用中，`pointer-events: none`这个值尤其有用。例如，当你需要创建一个覆盖层（overlay）来显示某些信息，但又不希望它阻止用户与底层元素的交互时，就可以使用这个属性。在提供的示例中，一个灰色的`div`（`.overlay`）被设置为`pointer-events: none`，因此，用户仍然可以点击下面的链接，即使灰色的盒子位于其上。
这个属性在现代浏览器中得到了广泛支持，包括Firefox 3.6+、Safari 4、Google Chrome，以及可能的Opera和Internet Explorer（根据版本）。不过，对于不支持此属性的浏览器，可能需要使用JavaScript作为备选方案，以实现相同的效果。
在示例代码中，`<input type="checkbox">`用于动态启用或禁用`.overlay`元素的`pointer-events: none`效果。当复选框被选中时，`overlay`类名会被添加`pointer-events-none`，使灰色盒子不再接收鼠标事件。这展示了`pointer-events`属性如何通过JavaScript进行动态控制，以实现交互性更强的设计。
`pointer-events`属性是CSS中一个强大的工具，它可以增强网页的用户体验，使开发者能更精细地控制元素对鼠标事件的响应。通过合理运用，我们可以创建出更灵活且用户友好的界面。
