正确写法是为<tr>绑定事件监听器，用event.preventDefault()和event.target判断点击目标，跳过A/BUTTON/INPUT等元素；需加tabindex="0"、onkeydown支持键盘导航，并用window.location.href跳转以保留历史记录。
表格行点击跳转的正确写法
直接给 <tr> 绑定 onclick 并执行 window.location.href = 'xxx' 是可行的，但容易踩坑：比如单元格内有按钮、链接或表单控件时，点击它们会触发两次跳转（事件冒泡 + 自身行为），或者在 Safari 上因默认行为被拦截而失效。
- 优先用
event.preventDefault()配合event.target判断是否该跳转，避免干扰内部可交互元素 - 不要在
<tr>上直接写onclick="window.location='...'"，这种内联写法难以维护，且无法阻止子元素默认行为 - 如果表格支持键盘导航（如 Tab 进入行），需额外加
tabindex="0"和onkeydown处理 Enter/Space 键
如何防止点击 td/a/input 时误跳转
核心是区分点击目标：只在用户点击空白区域或明确指定的触发区才跳转。常见错误是没过滤 event.target 类型，导致点进链接后页面跳两次。
- 检查
event.target.tagName，若为'A'、'BUTTON'、'INPUT'、'SELECT'等，直接return - 可以用
closest()判断是否点击在禁用跳转的容器内，例如：if (event.target.closest('.no-jump')) return - 给需要保留原生行为的子元素统一加 class（如
class="ignore-row-click"），然后在 handler 里跳过
window.location.href vs window.location.replace
两者都可跳转，但语义和历史记录不同。多数场景该用 window.location.href，除非你确定不需要后退到当前表格页。
-
window.location.href = 'https://example.com'：新增浏览器历史条目，用户点返回能回到表格页 -
window.location.replace('https://example.com')：替换当前历史条目，点返回会跳过本页 —— 适合表单提交后跳转，避免重复提交 - 注意：若 URL 是相对路径（如
'detail.html?id=123'），确保路径解析符合预期，建议用绝对路径或new URL('detail.html?id=123', location.href).href安全拼接
兼容性与无障碍要点
IE11 已基本淘汰，但 event.currentTarget 在旧版 Edge 中可能不指向 <tr>，且屏幕阅读器不会把 <tr> 当作可聚焦控件。
立即学习“前端免费学习笔记（深入）”；
- 必须给
<tr>加tabindex="0"，否则键盘用户无法聚焦该行 - 配合
onkeydown监听Enter和Space键，Space 键需event.preventDefault()防止滚动 - 添加 ARIA 属性提升可访问性：
role="link"和aria-label="查看详情"（内容需有意义，不能写“跳转”） - 移动端要注意
touchstart触发比click更快，可考虑监听touchstart并preventDefault避免双击放大
<tbody>，而不是每个 <tr> 单独绑 —— 尤其是动态渲染的表格。 
