应使用事件委托在table或tbody上监听pointerdown事件，并通过e.target.tagname==='td'判断目标，配合e.preventdefault()避免默认行为，再向上查找td父元素以处理跨单元格选中场景。
给 <td> 绑定点击事件时为什么没反应
<p>直接在 <code><td> 上写 <code>onclick 属性看似简单，但容易被表格嵌套结构干扰（比如单元格里有 <div> 或 <code><span></span>），导致事件不触发。更稳妥的方式是用 JavaScript 为所有 <td> 统一添加事件监听，且必须等 DOM 加载完成后再执行。
<p>实操建议：</p>
<ul>
<li>用 <code>document.addEventListener('DOMContentLoaded', ...) 包裹初始化逻辑，避免元素未挂载就绑定
querySelectorAll('td') 获取全部单元格，再遍历绑定 addEventListener('click', ...)
用事件委托避免重复绑定 <td>
<p>当表格可能被多次重绘、增删行时，反复调用 <code>querySelectorAll('td').forEach(...) 会泄漏监听器，也增加开销。正确做法是把点击监听器挂在 <table> 或 <code><tbody> 上，利用事件冒泡捕获目标单元格。
<p>示例代码片段：</p>
<pre class="brush:php;toolbar:false;">document.querySelector('table').addEventListener('click', function(e) {
if (e.target.tagName === 'TD') {
const content = e.target.textContent.trim();
alert(`点击内容：${content}`);
}
});</pre>
<p>注意：<code>e.target 是实际被点击的元素，它可能是 <td> 内部的文本节点或子标签，所以要用 <code>tagName === 'TD' 判断，而不是 instanceof HTMLTableCellElement（兼容性差）。
alert() 太简陋？换原生 title 或自定义弹层
alert() 太简陋？换原生 title 或自定义弹层alert() 会阻塞页面、样式不可控，真实项目中基本不用。两个轻量替代方案：
- 用
title属性：给每个<td> 加 <code>title="提示文字"，鼠标悬停即显示——但不响应点击，且无法控制样式和交互 - 用绝对定位
<div> 模拟弹框：创建一个隐藏的 <code><div id="tooltip">，点击时读取 <code>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></span> 或文本节点，得往上逐级找 <td> 父元素，这个边界逻辑很多人漏掉。</td>
