直接给加pointer-events: none有时无效，是因为事件目标可能不是本身——若父级或误设该属性，或被非法包裹导致dom结构异常，事件将无法到达目标节点；必须确保样式作用于实际接收事件的元素，并用console.log(e.target)验证。
为什么直接给 <td> 加 <code>pointer-events: none 有时没效果？
常见现象是：样式写了，td 看起来没变化，但点击依然触发——问题往往出在继承链或父级干扰上。比如 <tr> 或 <code><table> 上误设了 <code>pointer-events: none，导致整行失效；或者该 <td> 被包裹在 <code><div> 里（违反表格语义），而 <code>div 才是事件目标。
真正生效的前提是：目标元素必须是实际接收鼠标事件的节点。检查方式很简单：console.log(e.target) 看点击时输出的是不是你预期的 <td>。如果不是，说明事件没落到它身上。
<ul><li>确保禁用样式直接作用于目标 <code><td>，而非其父容器
<li>避免在 <code><tr> 或 <code><table> 上设置 <code>pointer-events: none —— 它会“拦下”所有子元素的鼠标事件
<div> 包裹 <code><td>，HTML 解析器会自动剥离，DOM 结构不可靠
<h3>如何动态切换某列的可点击状态？</h3>
<p>静态写死 <code>style="pointer-events: none" 不够灵活，尤其涉及权限、加载中、编辑态等运行时逻辑。推荐用 CSS 类控制，JS 只负责增删 class：
.disabled-click { pointer-events: none; cursor: default; }
然后根据状态批量操作：
- 禁用第 2 列所有单元格：
document.querySelectorAll('tr td:nth-child(2)').forEach(td => td.classList.add('disabled-click')) - 启用某一行的特定列：
row.querySelector('td[data-unit="metre"]').classList.remove('disabled-click') - 配合 Vue/React 时，绑定 class 如
:class="{ 'disabled-click': !isEditable }"，比内联 style 更易维护
pointer-events: none 和 disabled 的根本区别是什么？
这是最容易混淆的点：pointer-events: none 只管鼠标和触控，完全不管键盘、表单提交、屏幕阅读器或浏览器原生行为。
比如一个 <button></button> 设了 pointer-events: none，鼠标点不动，但用户按 Enter 或 Space 仍能触发 onclick；它的 value 依然会随表单提交；屏幕阅读器照样把它读作可操作按钮。
- 表单控件（
<input>、<select></select>、<button></button>）必须用原生disabled属性才真正禁用所有交互通道 -
pointer-events: none适合纯展示型交互屏蔽，比如表格中非操作列、临时遮罩层、图标占位符 - 若需兼顾键盘与无障碍，得额外加
tabindex="-1"和aria-disabled="true"
IE11 兼容场景下怎么安全降级？
IE11 支持 pointer-events: none，但旧版 IE（10 及以下）不支持。如果项目仍需兼容，不能只依赖 CSS，得在 JS 事件处理中做兜底判断：
row.onclick = function(e) {
const td = e.target.closest('td');
if (!td || td.classList.contains('disabled-click') || td.getAttribute('data-disabled') === 'true') {
return;
}
// 处理点击逻辑
};
关键点在于：CSS 层面的禁用只是视觉+鼠标层面的优化，真正的业务逻辑校验和交互拦截必须落在 JS 里。
最常被忽略的是——pointer-events: none 让鼠标“穿透”元素，点击会落到下方 DOM 上。如果表格下面有固定定位的按钮或悬浮菜单，这点极易引发意外交互，务必提前测试渲染层级。
