应使用事件委托在table或tbody上监听pointerdown事件，并通过e.target.tagName==='TD'判断目标，配合e.preventDefault()避免默认行为，再向上查找td父元素以处理跨单元格选中场景。
给 <td> 绑定点击事件时为什么没反应
直接在 <td> 上写 onclick 属性看似简单，但容易被表格嵌套结构干扰（比如单元格里有 <div> 或 <span>），导致事件不触发。更稳妥的方式是用 JavaScript 为所有 <td> 统一添加事件监听，且必须等 DOM 加载完成后再执行。
实操建议：
- 用
document.addEventListener('DOMContentLoaded', ...)包裹初始化逻辑，避免元素未挂载就绑定 - 优先用
querySelectorAll('td')获取全部单元格，再遍历绑定addEventListener('click', ...) - 若表格动态生成（如 AJAX 加载后插入），需在插入完成后重新绑定，或改用事件委托（见下一条）
用事件委托避免重复绑定 <td>
当表格可能被多次重绘、增删行时，反复调用 querySelectorAll('td').forEach(...) 会泄漏监听器，也增加开销。正确做法是把点击监听器挂在 <table> 或 <tbody> 上，利用事件冒泡捕获目标单元格。
示例代码片段：
立即学习“前端免费学习笔记（深入）”；
document.querySelector('table').addEventListener('click', function(e) {
if (e.target.tagName === 'TD') {
const content = e.target.textContent.trim();
alert(`点击内容：${content}`);
}
});
注意：e.target 是实际被点击的元素，它可能是 <td> 内部的文本节点或子标签，所以要用 tagName === 'TD' 判断，而不是 instanceof HTMLTableCellElement（兼容性差）。
alert() 太简陋？换原生 title 或自定义弹层
alert() 会阻塞页面、样式不可控，真实项目中基本不用。两个轻量替代方案：
- 用
title属性：给每个<td>加title="提示文字"，鼠标悬停即显示——但不响应点击，且无法控制样式和交互 - 用绝对定位
<div>模拟弹框：创建一个隐藏的<div id="tooltip">，点击时读取e.target内容，设置innerText，再用getBoundingClientRect()计算位置并显示 - 注意：若单元格含 HTML（如
<strong>加粗</strong>），textContent会丢失格式，此时应改用innerText（渲染后文本）或提取纯文本逻辑
移动端点击延迟与误触问题
在 iOS Safari 或部分安卓浏览器中，单纯监听 click 会有约 300ms 延迟，且容易因滑动误触发。解决方案不是加 touchstart，而是统一用 pointerdown——它兼容鼠标、触摸、笔输入，且无延迟。
修改监听方式即可：
table.addEventListener('pointerdown', function(e) {
if (e.target.tagName === 'TD') {
e.preventDefault(); // 防止长按唤出菜单等默认行为
showTooltip(e.target);
}
});
关键点：pointerdown 比 click 更及时，但要注意加 e.preventDefault() 避免某些设备上的默认反馈干扰；另外，不要同时监听 click 和 pointerdown，否则可能触发两次。
真正麻烦的是跨单元格选中文本后点击——这时候 e.target 可能是 <span> 或文本节点，得往上逐级找 <td> 父元素，这个边界逻辑很多人漏掉。
