应将点击事件委托到 table 或 tbody 上，用 event.target.closest('td') 定位单元格，避免直接绑定 td；子元素需调用 stoppropagation()；框架中避免内联函数，用 data 属性传参；移动端需禁用双击缩放。
直接给 td 绑事件？小心事件冒泡干扰
多数人第一反应是给每个 td 单独加 onclick，但实际项目里容易出问题：表格动态渲染、复用 DOM、或嵌套可点击元素（如按钮、链接）时，td 的点击会和子元素冲突，甚至触发多次。更稳妥的做法是委托到 table 或 tbody 上，用 event.target 判断是否点在 td 内。
实操建议：
- 优先用事件委托：
table.addEventListener('click', handler)，避免遍历所有td - 在 handler 里用
event.target.closest('td')获取被点击的单元格，比event.target.tagName === 'TD'更可靠（能穿透文本节点、内联元素） - 如果
td里有button或a，且你希望它们各自处理点击，记得在子元素 handler 中调用event.stopPropagation()
td 里内容是富文本或表单控件，怎么准确定位点击位置
当 td 包含 input、span、图片甚至空格文本时，event.target 可能指向子节点而非 td 本身。这时候仅靠 event.target === td 会失效。
实操建议：
- 统一用
event.target.closest('td')—— 它会向上查找最近的td祖先，哪怕点在td的空白处或子元素上 - 若需排除某些子元素（比如不响应
img的点击），可在 handler 中加判断：if (td && !event.target.matches('img, .ignore-click')) { ... } - 注意：IE 不支持
closest()，需 polyfill 或改用循环parentNode查找
React/Vue 里绑定 td 点击，别在 render 循环里写内联函数
在 JSX 或模板中对每个 td 写 onClick={() => handleClick(row, col)} 看似方便，但每次 render 都会创建新函数，可能触发不必要的子组件重渲染，也影响 shouldComponentUpdate 或 memo 判断。
实操建议：
- 把参数通过
data-*属性存到td上，例如：<td data-row="2" data-col="3" onclick="{handleCellClick}">，然后在 <code>handleCellClick里读取event.currentTarget.dataset - Vue 用户可用
@click="handleCellClick(row, col)"，但确保row和col是稳定引用（避免用对象字面量或计算属性作为参数） - 如果表格极大（上千行），仍推荐用事件委托 +
querySelector定位，而非逐个绑定 - 在
加<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，这是前提 - 对
td或整个table加 CSS：-webkit-tap-highlight-color: transparent;和touch-action: manipulation; - 更彻底的方案是监听
touchstart并preventDefault()，但要注意：这会让td内的input失去聚焦能力，慎用
移动端点击 td 延迟 300ms？需要禁用双击缩放
桌面浏览器点击无延迟，但 iOS Safari 和部分安卓浏览器默认启用双击缩放，导致 click 事件延迟约 300ms 才触发，用户感知明显卡顿。
实操建议：
表格点击看似简单，真正麻烦的是边界情况——子元素干扰、动态更新、移动端响应、框架重渲染。把事件挂到父容器、用 closest 定位、避开内联函数、关掉缩放延迟，这几个点漏掉一个，就容易返工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
