本文介绍一种不依赖 pointer-events: none 的优雅方案：通过监听鼠标按下与点击事件的距离阈值，智能区分“文本选择”与“链接点击”，从而既保障文字可全段/跨段选中，又不失链接跳转功能。
在构建可点击表格行（如每行跳转至详情页）时，开发者常采用在
直接设置 pointer-events: none 虽能恢复文本选择，却彻底禁用了链接的点击响应——这违背了核心需求：既要可选中，也要可点击。
✅ 推荐解法：事件行为智能判别
核心思路是放弃“覆盖层拦截+透传”的旧范式，转而将点击行为交由目标
- 用户按下鼠标（mousedown）时记录坐标；
- 触发 click 时，计算鼠标释放点与按下点的曼哈顿距离（或欧氏距离）；
- 若位移极小（例如
- 若位移较大，则说明用户正在拖动以选中文本，此时忽略跳转逻辑，让浏览器原生完成文本选择。
该方案完全规避了 dom 层级遮挡问题，且兼容所有现代浏览器（包括 safari、firefox、chrome）。
? 实现代码（轻量、无依赖）
The quick brown fox jumps over the lazy dog Another clickable row
.tdlink { cursor: pointer; position: relative; /* 可选：仅用于视觉提示 */ } /* 移除所有绝对定位覆盖层 —— 不再需要 */// 页面加载后绑定事件（建议放在 document.ready 或 DOMContentLoaded 中） document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.tdlink').forEach(cell => { let clickStart = { x: 0, y: 0 }; cell.addEventListener('mousedown', e => { clickStart = { x: e.clientX, y: e.clientY }; }); cell.addEventListener('click', e => { const dx = Math.abs(e.clientX - clickStart.x); const dy = Math.abs(e.clientY - clickStart.y); const threshold = 3; // 像素容差，防止误触 if (dx <= threshold && dy <= threshold) { const href = cell.dataset.href; if (href) { window.location.href = href; } } // 若超出阈值，不做任何操作 → 浏览器继续处理文本选择 }); }); });⚠️ 注意事项与增强建议
- 无障碍支持：为 .tdlink 添加 role="link" 和 tabindex="0"，并确保键盘 Enter/Space 键也能触发跳转，以满足 WCAG 2.1 标准；
- 移动端适配：触摸设备需额外监听 touchstart/touchend，并使用 touches[0].clientX/Y 替代 clientX/Y；
- 防重复触发：click 事件在双击时可能触发两次，可在跳转后短暂禁用（如加锁标志）或使用 e.preventDefault() 配合 window.open() 控制；
- 样式反馈：可通过 :active 伪类或 js 添加临时 is-pressing 类，提供视觉按压反馈，提升交互感。
此方案不仅解决了原始问题，更推动结构向语义化、可访问、可维护的方向演进：把交互逻辑交给内容容器本身，而非靠遮罩层“模拟”行为。简洁、可靠、符合现代 Web 开发最佳实践。