设了pointer-events: none却没穿透，大概率是父级容器也设了该属性，子元素即使显式设auto也无效——现代浏览器中none会使整棵子树退出hit testing，子元素无法“自救”。
pointer-events: none 为什么设了却没穿透？
设了 pointer-events: none 却点击不到下层元素，大概率是父级容器也设了 pointer-events: none，子元素即使显式设 pointer-events: auto 也无效——现代浏览器中，none 会整棵子树退出 hit testing，子元素无法“自救”。
常见踩坑点：
- 给弹窗外层 wrapper 设
pointer-events: none，又想让里面的关闭按钮可点 → 不行，按钮必须从 DOM 结构上脱离该 wrapper，或改用display: none隐藏整个 wrapper - 表格外层加了
.table-wrapper { pointer-events: none; }，再给td设auto→ 无效，tr和tbody默认不响应事件，真正要设的是td、th或其内联子元素（如a） -
dialog::backdrop默认就是pointer-events: none，所以点击遮罩会穿透到背景 → 必须手动覆盖为pointer-events: auto
怎么让某一层“透”而另一层“挡”？
典型场景：绝对定位的水印层盖在表格上，水印不可点，但表格单元格仍需响应点击。不能简单给整个水印容器设 pointer-events: none，因为如果水印里有按钮（比如“下载原图”），它就彻底废了。
正确做法是分层控制：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 水印层用伪元素实现：
.table-overlay::before，并只对它设pointer-events: none - 水印里的操作按钮单独设
pointer-events: auto，且确保它没被包裹在任何none祖先中 - 表格本身保持默认
pointer-events: auto，不需要额外设置 - 移动端要注意：iOS Safari ≤15.3 在
pointer-events: none层下压着input时，软键盘可能不弹出 → 改用::before绘制水印，避免遮盖可编辑区域
click 和 touchend 混用导致的“假穿透”
这不是 CSS 设置问题，而是事件时机错位：用户点关闭按钮触发 touchend，你在里面隐藏弹层（比如切 visibility 或 opacity），300ms 后浏览器才派发 click，此时弹层已不可见，click 就落到下层按钮上——看起来像穿透，其实是延迟触发。
排查和修复要点：
- 检查是否对关闭按钮绑了
touchend，但下层元素只监听click - 禁止在
touchend中仅靠 CSS 切换显示状态来“隐藏”，应同步用display: none移除或用inert属性禁用背景 - 最稳解法：统一把交互入口从
click换成touchend（PC 兼容需判断'ontouchstart' in window） -
a标签跳转要手动处理：event.preventDefault(); location.href = 'xxx';，不能依赖默认行为
disabled 按钮为什么挡不住点击穿透？
disabled 只让按钮自身静默，不阻止事件穿透到父级或底层。比如一个灰色按钮放在卡片里，卡片本身监听 click，用户点按钮空白处，卡片仍会响应——因为 disabled 不影响父容器的事件捕获路径。
若需真正“挡住”所有点击：
- 给按钮父容器（如卡片）设
pointer-events: none，再单独给卡片内其他可点区域（如图标）设auto - 不要只信
disabled，配合aria-disabled="true"+tabindex="-1"+pointer-events: none才算完整禁用 - 注意状态同步：用
el.disabled = true设置的，必须用el.disabled = false恢复；用setAttribute('disabled', '')设置的，得用removeAttribute('disabled')，混用会导致视觉可点但实际无效
真正难搞的不是怎么设 pointer-events，而是弄清事件流在哪一层断、在哪一层续——DOM 层级、CSS 渲染层、浏览器事件调度时机，三者稍有错位，点击就“飞”了。
