本文介绍一种不依赖 pointer-events: none 的优雅方案：通过监听鼠标按下与点击事件的距离阈值，智能区分“文本选择”与“链接点击”，从而既保障文字可全段/跨段选中，又不失链接跳转功能。
在构建可点击表格行（如每行跳转至详情页）时，开发者常采用在
直接设置 pointer-events: none 虽能恢复文本选择，却彻底禁用了链接的点击响应——这违背了核心需求：既要可选中，也要可点击。
✅ 推荐解法：事件行为智能判别
核心思路是放弃“覆盖层拦截+透传”的旧范式，转而将点击行为交由目标 该方案完全规避了 DOM 层级遮挡问题，且兼容所有现代浏览器（包括 Safari、Firefox、Chrome）。 此方案不仅解决了原始问题，更推动结构向语义化、可访问、可维护的方向演进：把交互逻辑交给内容容器本身，而非靠遮罩层“模拟”行为。简洁、可靠、符合现代 Web 开发最佳实践。（或语义化容器）自身处理，并通过微位移判定用户意图：
? 实现代码（轻量、无依赖）
<table>
<tbody>
<tr>
<td class="tdlink" data-href="https://wikipedia.org">The quick brown fox jumps over the lazy dog</td>
<td class="tdlink" data-href="https://example.com">Another clickable row</td>
</tr>
</tbody>
</table>.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;
}
}
// 若超出阈值，不做任何操作 → 浏览器继续处理文本选择
});
});
});⚠️ 注意事项与增强建议
