pointer-events: none 实现点击穿透的关键是确保表格及其所有祖先容器均设置 pointer-events: none，且下方元素在 dom 中位于表格之后、z-index 合理、自身 pointer-events 为 auto；精细化控制需对可交互单元格显式设 auto，并注意框架样式优先级与 ios safari 兼容性问题。
pointer-events: none 会让整个表格不可交互，但下方元素还是点不了？
直接给 <table> 设置 <code>pointer-events: none 确实能“穿透”点击，但前提是：下方元素必须在 DOM 中位于该表格之后（即视觉上被盖住、但结构上在它下面），且没有其他 pointer-events: none 的父容器拦截。常见错误是把表格包在某个 div 里，而那个 div 没关 pointer-events —— 那么点击事件根本到不了表格层，更别说穿透了。
真正起作用的是「事件捕获路径上最后一个可响应的节点」。所以关键不是表格本身，而是它和下方元素之间的所有祖先容器都得放行。
- 确保表格的父容器（比如外层
div）也设置了pointer-events: none - 如果用了
position: absolute/fixed叠加，检查 z-index 是否导致表格层“物理上”没盖住目标元素 - Chrome DevTools 中右键检查目标下方元素，用
Elements → Styles面板确认它的pointer-events是auto（默认值），不是被继承或重置为none
只想让表格内容不可点，但表格外边框或空单元格区域允许穿透？
不能只对 <table> 设 <code>none，否则整个表格区域都失效。得精细化控制：把 pointer-events: auto 显式还给需要响应的部分（比如带链接的 <td>），其余保持 <code>none。
table {
pointer-events: none;
}
table td.has-clickable-content,
table th,
table a {
pointer-events: auto;
}
注意：<tr> 和 <code><tbody> 默认不响应点击，设 <code>auto 也没用；真正起作用的是 <td>、<code><th> 或其子元素。另外，如果 <code><td> 里有 <code>display: block 子元素，记得子元素也要设 pointer-events: auto，否则事件仍被阻断。
React/Vue 里动态切换 pointer-events 导致穿透失效？
框架组件常通过内联样式或 class 切换控制 pointer-events，但容易忽略「样式优先级」问题。比如 CSS 文件里写了 table { pointer-events: auto !important; }，JS 动态加的 style="pointer-events: none" 就会被覆盖。
- 优先用 class 控制，例如
<table class="click-through">，配合 CSS 中 <code>.click-through { pointer-events: none; } - 避免在组件根元素上直接写
style={{ pointerEvents: 'none' }}，除非确认无更高优先级 CSS 干扰 - Vue 中用
:class="{ 'click-through': isTransparent }"比绑定 style 更稳定
移动端 Safari 点击穿透偶尔失灵？
iOS Safari 对 pointer-events 的实现有缓存和延迟行为，尤其在快速连续点击或页面缩放后。单纯依赖 none 不够可靠。
补救方案是加一层轻量级事件代理：给表格绑定 onClick，判断点击位置是否落在空白单元格，如果是，手动触发下方元素的 click() 方法。
table.addEventListener('click', (e) => {
const target = e.target;
if (target.tagName === 'TD' && !target.querySelector('a, button, input')) {
const belowEl = document.elementFromPoint(e.clientX, e.clientY);
if (belowEl && belowEl !== table && belowEl.click) {
belowEl.click();
}
}
});
这个逻辑绕过了 pointer-events 的渲染时判断，直接走 DOM 查找 —— 但要注意 elementFromPoint 返回的是当前视口坐标下的元素，若表格有滚动或 transform，需先做坐标转换。实际项目中，多数穿透失败都源于祖辈容器漏关 pointer-events，而不是浏览器兼容性问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
