高亮不生效主因是未正确处理样式切换逻辑、css优先级被覆盖或tr缺少cursor:pointer；需用addeventlistener绑定事件，配合closest('tr')获取行元素并切换类名，同时适配移动端touch事件。
给 tr 绑定点击事件时，为什么高亮不生效？
常见原因是直接给 tr 加 onclick 或用 addEventListener 但没处理样式切换逻辑，或者 CSS 类名写错、优先级被覆盖。更关键的是：表格行默认没有 cursor: pointer，用户根本看不出可点；且部分浏览器对 tr 的 :hover/:focus 支持有限，必须靠 JS 显式切换类。
实操建议：
- 确保目标
tr所在的table有明确的border-collapse: collapse，避免边框撑开导致点击区域错位 - 不要用内联
onclick="..."，统一用addEventListener('click', ...)管理 - CSS 中定义高亮类（如
.row-active）时，需显式设置background-color和color，不能只依赖继承 - 若表格含
th行，注意是否要排除 —— 通常只对tbody tr绑定
event.target 指向 td 时怎么拿到整行？
点击单元格时，event.target 是 td 或其子元素，不是 tr。直接用 event.target.closest('tr') 是最可靠解法，它会向上查找最近的 tr 祖先，兼容嵌套内容（比如按钮、链接）。
示例代码片段：
document.querySelectorAll('tbody tr').forEach(row => {
row.addEventListener('click', function(e) {
// 先清除所有已激活行
document.querySelectorAll('tbody tr.row-active').forEach(el => el.classList.remove('row-active'));
// 再激活当前行
this.classList.add('row-active');
});
});
注意：this 在事件回调中就是 tr 元素，比 e.target.closest('tr') 更直接安全；但如果事件委托到 tbody，就必须用 closest。
多选模式下怎么支持 Ctrl/Cmd + 点击？
单击默认是“切换当前行”，但用户常希望按住 Ctrl（Windows/Linux）或 Cmd（macOS）多选 —— 这需要检测 e.ctrlKey 或 e.metaKey。
实操要点：
- 点击时先判断是否按下了修饰键：
if (e.ctrlKey || e.metaKey) - 如果是，则用
classList.toggle('row-active')替代add，实现增减而非全量替换 - 避免同时存在“单选”和“多选”逻辑冲突：要么统一用多选模式，要么加个开关控制行为
- 如果后续要读取选中行，建议维护一个
Set或数组缓存row.dataset.id，别每次都遍历 DOM
移动端点击高亮延迟或失效怎么办？
iOS Safari 和部分安卓浏览器对 click 事件有 300ms 延迟，且触摸区域识别不准，导致点击 tr 无响应。这不是样式问题，而是事件触发时机不对。
解决路径：
- 给
tr加style="touch-action: manipulation"，告诉浏览器这个区域只做简单操作，禁用双击缩放等默认行为 - 把事件监听从
click改为touchstart（注意：需同时保留click以兼容桌面端） - 避免在
tr内放input、button等原生可聚焦元素 —— 它们会抢走焦点，干扰高亮状态同步 - 真机调试时，用
console.log(e.type)确认实际触发的是哪个事件，别只信模拟器
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
