IntersectionObserver是滚动高亮首选方案，因其轻量、准确且支持阈值控制；点击高亮需缓存上一行并限定作用域；悬停高亮须用mouseenter/mouseleave防冒泡，并兼顾移动端touch事件。
动态高亮不是“加个 class 就完事”，核心在于「状态判定时机」和「目标匹配精度」——滚动时谁该亮、点击后谁该留亮、悬停时谁该瞬时亮，背后触发逻辑完全不同，混用一套代码必然出错。
滚动定位高亮：靠 isIntersecting 还是 getBoundingClientRect？
现代做法首选 IntersectionObserver，它比监听 scroll + 手动算 getBoundingClientRect() 更轻量、更准确，且原生支持阈值控制（比如“进入视口 20% 就触发”）。
- 用
new IntersectionObserver(callback, { threshold: 0.2 })注册监听，避免 scroll 事件频繁触发导致卡顿 - 每个被监听的区块（如
<section id="pricing"></section>）必须有唯一id，否则顶部导航按钮无法精准匹配 - 回调中只处理
isIntersecting === true的项，且建议取最后一个（避免顶部多个区块同时进入时误判） - 别在回调里直接操作 DOM 样式，先收集要高亮的
id，再统一查document.querySelector(`.nav-btn[data-id="${id}"]`)加类
点击行高亮：为什么 selected 类总清不干净？
常见错误是只删新类不清理旧状态，或用 querySelectorAll('.selected') 全局扫——结果把其他表格、弹窗里的高亮也干掉了。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给表格加明确
id="orderTable"，清理范围限定为#orderTable tr.selected - 不要在每次 click 里重复查询所有行，用变量缓存上一次高亮的
tr：let currentRow = null;，点击新行前对它调classList.remove('selected') - 用
e.target.closest('tr')获取点击目标行，兼容点在 td 内文字、图标等任意位置 - 记得过滤
thead和tfoot：if (!tr || tr.parentElement.tagName !== 'TBODY') return;
悬停高亮：CSS :hover 够不够用？
纯 :hover 只适用于“瞬时反馈”，一旦需要记忆状态（比如用户点了某张图想一直高亮）、或联动其他元素（悬停 A 行，B 表格对应列也亮），就必须切到 JS 控制 is-hovered 类。
立即学习“前端免费学习笔记（深入）”；
- 移动端需额外监听
touchstart并e.preventDefault()，否则 iOS 会延迟 300ms 才触发 hover - 避免用
onmouseover/onmouseout：它们会因子元素冒泡反复触发，改用mouseenter/mouseleave - 如果高亮依赖计算（比如“离鼠标最近的单元格”），就得用
getBoundingClientRect()算坐标距离，:hover完全无能为力
最易被忽略的是「多状态叠加」：比如某行既被滚动激活（is-active），又被手动点击选中（is-selected），还处于悬停中（is-hovered）——三个类共存时 CSS 优先级、动画冲突、移除逻辑都得提前设计清楚，不能等上线后靠试错补丁。
