pointer-events: none能穿透点击，是因为它使元素完全不捕获任何指针事件，浏览器将事件透传给下方最近的可交互元素，且不影响DOM结构、渲染或键盘焦点。
当页面上有一层半透明遮罩（比如弹窗背景、加载蒙层、高亮提示层），又希望用户能直接点击到它下面的按钮或链接时，pointer-events: none 就是实现“点击穿透”的核心方案。
为什么 pointer-events: none 能穿透点击
CSS 的 pointer-events 属性控制元素是否参与鼠标事件（如 click、hover、drag）。设为 none 后，该元素完全不捕获任何指针事件，浏览器会把事件“透传”给其下方最近的、pointer-events 不为 none 的元素（按层叠顺序和 DOM 顺序综合判断）。
注意：它只影响鼠标/触控事件，不影响 DOM 结构、渲染、键盘焦点或 JS 主动触发的事件（如 element.click()）。
基础用法：让覆盖层不拦截点击
假设你有一个全屏遮罩层（.overlay），想让它视觉可见但点击不生效：
立即学习“前端免费学习笔记（深入）”；
CSS 示例：
.overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.3);
pointer-events: none; /* ? 关键：点击直接穿透 */
}HTML 结构示例：
<div class="overlay"></div> <button id="target-btn">我才是可点击的目标</button>
此时点击遮罩任意位置，实际触发的是按钮的 click 事件。
进阶技巧：局部启用交互（如关闭按钮）
如果遮罩上有某些区域需要响应点击（例如右上角的 × 关闭按钮），不能整个遮罩都设 pointer-events: none。解决方案是：
- 给遮罩本身设
pointer-events: none - 给内部需要交互的子元素（如关闭按钮）显式设
pointer-events: auto
CSS 示例：
.overlay {
pointer-events: none;
}
.overlay .close-btn {
pointer-events: auto; /* ? 子元素恢复响应 */
position: absolute;
top: 12px; right: 12px;
}这样遮罩背景不响应点击，但关闭按钮可以正常点击 —— 浏览器会优先将事件分发给这个有 auto 值的子元素。
常见坑与注意事项
-
父元素设了
none，子元素必须显式设auto：继承值是auto，但一旦父设了none，子不会自动恢复；必须手动写pointer-events: auto -
不要滥用在表单控件上：输入框、下拉框等原生控件设
none会导致无法聚焦、输入失效，且部分浏览器行为不一致 -
Z-index 仍需合理设置：
pointer-events: none不改变层叠顺序，只是跳过事件捕获。确保遮罩在视觉上确实盖在目标元素之上（靠z-index或文档流位置） - 移动端兼容性良好：现代 iOS Safari / Android Chrome 均支持，无需前缀
