直接给<td>加pointer-events: none有时无效，是因为事件目标可能不是<td>本身——若父级<tr>或<table>误设该属性，或<td>被非法<div>包裹导致DOM结构异常，事件将无法到达目标节点；必须确保样式作用于实际接收事件的<td>元素，并用console.log(e.target)验证。
为什么直接给 <td> 加 pointer-events: none 有时没效果？
常见现象是：样式写了，td 看起来没变化，但点击依然触发——问题往往出在继承链或父级干扰上。比如 <tr> 或 <table> 上误设了 pointer-events: none，导致整行失效；或者该 <td> 被包裹在 <div> 里（违反表格语义），而 div 才是事件目标。
真正生效的前提是：目标元素必须是实际接收鼠标事件的节点。检查方式很简单：console.log(e.target) 看点击时输出的是不是你预期的 <td>。如果不是，说明事件没落到它身上。
- 确保禁用样式直接作用于目标
<td>，而非其父容器 - 避免在
<tr>或<table>上设置pointer-events: none—— 它会“拦下”所有子元素的鼠标事件 - 不要用
<div>包裹<td>，HTML 解析器会自动剥离，DOM 结构不可靠
如何动态切换某列的可点击状态？
静态写死 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> 设了 pointer-events: none，鼠标点不动，但用户按 Enter 或 Space 仍能触发 onclick；它的 value 依然会随表单提交；屏幕阅读器照样把它读作可操作按钮。
- 表单控件（
<input>、<select>、<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 上。如果表格下面有固定定位的按钮或悬浮菜单，这点极易引发意外交互，务必提前测试渲染层级。
