高亮残留的根本原因是未主动清除旧highlight类，DOM只叠加不替换；正确做法是先批量移除再单独添加，并注意移动端tap-highlight、状态持久化及事件委托中closest的合理使用。
高亮类名没被移除，是因为没主动清理旧状态
点击新元素时旧高亮还留着，根本原因不是 JS 执行失败，而是你只加了 classList.add('highlight')，却没在加之前清掉所有已存在的 highlight 类。DOM 不会自动帮你“换”状态，它只会叠加。
常见写法错误：
- 只对当前元素操作：
el.classList.add('highlight')→ 旧的还在 - 用
querySelector('.highlight')查找，但没限定父容器 → 可能删错其他区域的高亮 - 在事件委托里漏判
closest()返回 null 的情况，导致后续逻辑跳过清理
正确做法是：先批量清除，再单独添加。例如表格行高亮：
document.querySelector('#myTable').addEventListener('click', e => {
const row = e.target.closest('tr');
if (!row || row.parentElement.tagName !== 'TBODY') return;
// 清除所有 tbody 下的高亮行
document.querySelectorAll('#myTable tbody tr.highlight').forEach(r => r.classList.remove('highlight'));
row.classList.add('highlight');
});
移动端 touchstart 后高亮残留，其实是 :active 被覆盖了
iOS Safari 和部分安卓浏览器中，:active 伪类常不生效，不是你 CSS 写错了，而是系统默认的 -webkit-tap-highlight-color 遮罩层抢在 :active 之前渲染，并且会盖掉你写的背景色变化。
立即学习“前端免费学习笔记（深入）”；
必须同时处理两件事：
- 给目标元素设
-webkit-tap-highlight-color: transparent（注意只能是transparent，不能用rgba(0,0,0,0)） - 确保该元素有
cursor: pointer和touch-action: manipulation，否则:active在某些 WebView 里压根不触发 - 如果用了自定义
div模拟按钮，得加tabindex="0"和role="button"，否则-webkit-tap-highlight-color不起作用
刷新后高亮消失，不是 JS 没跑，而是状态没存
页面一刷新，所有 JS 内存清空，highlight 类自然没了。这不是 bug，是浏览器行为。想保留，就得手动把“当前哪个元素该高亮”这个信息存下来。
推荐用 sessionStorage 存 ID 或 data 属性值：
- 点击时存：
sessionStorage.setItem('highlightId', el.id) - 页面加载完立刻读：
const id = sessionStorage.getItem('highlightId')，再用document.getElementById(id)?.classList.add('highlight') - 别存整个 DOM 节点或函数，只存轻量标识符；关闭标签页后自动丢，符合用户预期
注意：如果高亮依赖动态生成的结构（比如表格行没有固定 id），就改存索引或 data-key，比如 data-row-index="5"。
事件委托下高亮失效，往往是因为 closest() 没兜住嵌套内容
表格单元格里有按钮、链接或 span，用户点的是子元素，e.target 就不是 td，直接 e.target.classList.add() 肯定失败。
必须用 closest() 向上找最近的语义容器：
- 写成
e.target.closest('td, th')，而不是e.target.tagName === 'TD' - 如果单元格里还有可点击组件（如删除图标），且你不希望点图标时也触发整格高亮，就在
closest()后加一层判断：if (e.target.matches('button, .icon-delete')) return - 移动端还要监听
touchstart并阻止默认行为（e.preventDefault()），否则部分安卓机型会忽略 click
复杂点在于：高亮逻辑和业务操作（如删除、编辑）共存时，得靠事件冒泡顺序和条件拦截来隔离，不能全靠一个事件处理器硬扛。
