应使用 event.currenttarget 获取绑定事件的 tr 元素，或用 event.target.closest('tr') 安全定位；id 或 url 通过 data-id/data-url 存储；跳转推荐 location.assign(url)，并添加点击反馈。
表格行绑定点击事件时，event.target 拿到的不是 tr 元素
直接给 tr 绑 onclick 或用 addEventListener 监听 tr，看似合理，但实际点击单元格内文字、图片或带样式的 span 时，event.target 往往是这些子元素，而非 tr。如果不做向上查找，跳转逻辑会失效或拿不到预期数据。
正确做法是利用事件冒泡，在 tr 上监听后，用 event.currentTarget（始终指向绑定事件的元素）获取行对象，或用 event.target.closest('tr') 安全定位。
- 推荐统一用
event.currentTarget：简洁、可靠，避免 DOM 树遍历开销 - 若需兼容老版本 IE（
closest不支持），可回退到while循环向上找tr - 不要依赖
event.target.tagName === 'TR'—— 条件太脆弱，容易漏判
如何从被点击的行中安全提取 ID 或路径参数
跳转需要知道详情页 URL，而 ID 通常不直接写在 tr 的 href 属性里（HTML 规范不支持），常见做法是把标识存在自定义属性中，比如 data-id 或 data-url。
注意几个易错点：
-
data-属性值必须是字符串，数字 ID 如123会被自动转成字符串，用时无需额外toString()，但别误用parseInt()强转再拼接，可能引入 NaN - 如果后端返回的是完整路径（如
/item/456），存进data-url最省事；如果是纯 ID，前端拼 URL 时要确认 base 路径是否一致（开发环境 vs 生产环境） - 避免把敏感信息（如用户 token）直接塞进
data-属性——它会暴露在 HTML 源码里
使用 window.location.href 还是 location.assign()？
两者效果一样，都会导航到新页面，但语义和调试体验有差异。
-
window.location.href = url更常见，写法直白，但赋值操作在某些旧浏览器中可能触发非预期重定向行为（极少见） -
location.assign(url)是标准方法，语义明确，且便于未来替换为location.replace()（不留下返回记录） - 绝对不要用
location = url—— 虽然能工作，但属于隐式强制类型转换，ESLint 会报no-implicit-coercion，可读性差 - 跳转前建议加一层判断：
if (url) location.assign(url)，防止空值导致跳转到首页
移动端点击反馈缺失导致用户误以为没点上
PC 端鼠标悬停有视觉提示，但手机触摸无 hover 效果，用户点完没反应，常反复点击。这不是 JS 逻辑问题，而是 UX 缺失。
- 给
tr加cursor: pointer只对桌面有效；移动端需配合:active伪类或 JS 添加临时 class - 简单方案：在 CSS 中写
tr:active { opacity: 0.8; }，但要注意部分安卓浏览器对:active支持不稳定 - 更稳妥的做法是在
click事件开头加tr.classList.add('clicked')，再用 CSS 控制过渡态，300ms 后移除 —— 避免影响滚动性能 - 如果表格用了
user-select: none，记得同时设-webkit-tap-highlight-color: transparent，否则 iOS 点击会有灰色遮罩干扰视觉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
