直接给遮挡元素加pointer-events: none最有效，因为浏览器在事件捕获阶段的命中测试（hit testing）会直接跳过该元素，事件透传至下方元素；它不是“点了没反应”，而是“压根没点到它”，比JS判断更底层、更可靠。
为什么直接给 加 pointer-events: none 最有效
因为浏览器的事件命中测试（hit testing）会在捕获阶段就跳过 pointer-events: none 的元素，根本不会把它当作点击目标——不是“点了没反应”，而是“压根没点到它”。这比在 JS 里反复判断 e.target 是否该忽略更底层、更可靠。
常见错误是给整个 <tr> 设 <code>pointer-events: none，结果整行都失活；必须精确作用于单个 <td>。例如：
<pre class="brush:php;toolbar:false;"><tr>
<td style="pointer-events: none;"></td>
<td id="unit-metre">Metre</td>
<td id="unit-cm">Centimetre</td>
</tr></pre>
<ul>
<li>首列空白单元格被禁用，点击无任何响应</li>
<li>其余 <code><td> 保持默认 <code>auto，可正常触发事件委托
DOM 结构完全合规，不触发浏览器自动修正（比如把 <div> 塞进 <code><tr>）
<h3>事件委托时怎么安全读取点击的 <code><td>
<p>绑定在 <code><tr> 上的 <code>onclick 会收到真实被点击的元素，但前提是它没被 pointer-events: none 拦截。此时 e.target 就是那个有 ID 的 <td>，无需额外过滤空单元格。
<p>示例逻辑：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a>
<p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<pre class="brush:php;toolbar:false;">document.querySelector('tr').onclick = function(e) {
if (e.target.tagName === 'TD' && e.target.id.startsWith('unit-')) {
console.log('选中单位:', e.target.id.replace('unit-', ''));
}
};</pre>
<ul><li>不用检查 <code>e.target.textContent 是否为空——pointer-events: none 已确保空 <td> 不会进入事件流
<li>避免用 <code>e.target.classList.contains() 做判断，除非你主动加了 class；ID 更轻量、更确定
如果某列需动态启用/禁用，直接切换 class 并配 CSS：.disabled { pointer-events: none; }
移动端和旧 IE 的兼容性怎么兜底
pointer-events: none 在 iOS Safari、Android Chrome 和 Edge 12+ 都稳定支持，但 IE11 是最后支持它的版本，IE10 及以下完全无效。
若项目仍需兼容 IE10 或更早版本，不能只靠 CSS，得配合 JS 过滤：
tr.onclick = function(e) {
const td = e.target.closest('td');
if (!td || !td.id || td.style.pointerEvents === 'none') return;
// 处理有效点击
};
- 注意：IE 不识别
pointer-events，所以 td.style.pointerEvents 永远是空字符串，此时只能靠 class 或其他标记（如 data-clickable="false"）来判断
- 不要试图用
visibility: hidden 或 opacity: 0 替代——它们视觉隐藏但依然拦截事件
- 移动端 WebView（尤其华为、小米定制内核）对多层
pointer-events: none 嵌套支持不稳定，尽量扁平化结构
容易被忽略的穿透行为：伪元素和子元素
一个 <td> 设了 <code>pointer-events: none，它的 ::before 或 ::after 伪元素也会继承该行为——但如果你没显式给伪元素设样式，它可能根本没尺寸，不影响穿透。
真正要小心的是子元素：
- 如果
<td> 里放了按钮或链接，且你给 <code><td> 设了 <code>pointer-events: none，那子元素也点不了——浏览器在捕获阶段就跳过了整棵子树
- 想让子元素可点？不能靠“父设 none + 子设 auto”，得把可交互子元素移出该
<td> DOM，例如用 Portal 渲染到 <code><body> 下
- 键盘焦点不受影响：
pointer-events: none 不阻止 Tab 进入、Enter 触发，如需完全禁用，必须同步处理 tabindex="-1" 和 aria-disabled
pointer-events: none 最有效
因为浏览器的事件命中测试（hit testing）会在捕获阶段就跳过 pointer-events: none 的元素，根本不会把它当作点击目标——不是“点了没反应”，而是“压根没点到它”。这比在 JS 里反复判断 e.target 是否该忽略更底层、更可靠。
常见错误是给整个 <tr> 设 <code>pointer-events: none，结果整行都失活；必须精确作用于单个 <td>。例如：
<pre class="brush:php;toolbar:false;"><tr>
<td style="pointer-events: none;"></td>
<td id="unit-metre">Metre</td>
<td id="unit-cm">Centimetre</td>
</tr></pre>
<ul>
<li>首列空白单元格被禁用，点击无任何响应</li>
<li>其余 <code><td> 保持默认 <code>auto，可正常触发事件委托
<div> 塞进 <code><tr>）
<h3>事件委托时怎么安全读取点击的 <code><td>
<p>绑定在 <code><tr> 上的 <code>onclick 会收到真实被点击的元素，但前提是它没被 pointer-events: none 拦截。此时 e.target 就是那个有 ID 的 <td>，无需额外过滤空单元格。
<p>示例逻辑：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a>
<p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<pre class="brush:php;toolbar:false;">document.querySelector('tr').onclick = function(e) {
if (e.target.tagName === 'TD' && e.target.id.startsWith('unit-')) {
console.log('选中单位:', e.target.id.replace('unit-', ''));
}
};</pre>
<ul><li>不用检查 <code>e.target.textContent 是否为空——pointer-events: none 已确保空 <td> 不会进入事件流
<li>避免用 <code>e.target.classList.contains() 做判断，除非你主动加了 class；ID 更轻量、更确定class 并配 CSS：.disabled { pointer-events: none; }
移动端和旧 IE 的兼容性怎么兜底
pointer-events: none 在 iOS Safari、Android Chrome 和 Edge 12+ 都稳定支持，但 IE11 是最后支持它的版本，IE10 及以下完全无效。
若项目仍需兼容 IE10 或更早版本，不能只靠 CSS，得配合 JS 过滤：
tr.onclick = function(e) {
const td = e.target.closest('td');
if (!td || !td.id || td.style.pointerEvents === 'none') return;
// 处理有效点击
};
- 注意：IE 不识别
pointer-events，所以td.style.pointerEvents永远是空字符串，此时只能靠 class 或其他标记（如data-clickable="false"）来判断 - 不要试图用
visibility: hidden或opacity: 0替代——它们视觉隐藏但依然拦截事件 - 移动端 WebView（尤其华为、小米定制内核）对多层
pointer-events: none嵌套支持不稳定，尽量扁平化结构
容易被忽略的穿透行为：伪元素和子元素
一个 <td> 设了 <code>pointer-events: none，它的 ::before 或 ::after 伪元素也会继承该行为——但如果你没显式给伪元素设样式，它可能根本没尺寸，不影响穿透。
真正要小心的是子元素：
- 如果
<td> 里放了按钮或链接，且你给 <code><td> 设了 <code>pointer-events: none，那子元素也点不了——浏览器在捕获阶段就跳过了整棵子树 - 想让子元素可点？不能靠“父设 none + 子设 auto”，得把可交互子元素移出该
<td> DOM，例如用 Portal 渲染到 <code><body>下 - 键盘焦点不受影响：
pointer-events: none不阻止Tab进入、Enter触发，如需完全禁用，必须同步处理tabindex="-1"和aria-disabled
