应监听代码块根元素的mouseover事件并用closest向上查找行容器，通过data-line获取行号；需为每行设置可识别锚点，容错处理token节点和快速移动，并优先用css:hover实现视觉反馈。
在自研代码高亮插件中，用事件委托捕获鼠标悬停的**当前行代码块**，关键不在于监听 `
` 或 `<code>` 的 hover，而是在其子元素（通常是每行对应的 `<span>`、`<div>` 或 `<li>`）上，通过事件对象的 `target` 和 DOM 路径向上查找，结合行号标识或容器结构精准定位。
<h3>确保每行有可识别的结构锚点</h3>
<p>事件委托依赖可稳定冒泡的 DOM 结构。推荐为每一行包裹一个带明确语义的容器，例如：</p>
<ul>
<li>使用 `<div class="code-line" data-line="5">...</div>` 包裹单行内容（最常用、语义清晰）</li>
<li>若用 `<ol><li data-line="5">...</li></ol>` 实现行号，`</li>
<li>` 本身即可作为行级目标</li>
<li>避免仅靠纯文本节点或无 class 的 `<span>`——它们难以统一捕获且易受高亮逻辑干扰</span>
</li>
</ul>
<h3>在父容器上监听 mouseover 并向上查找行容器</h3>
<p>将事件监听器绑定在代码块根元素（如 `</p>
<pre class="code-block">`）上，利用事件冒泡，在回调中从 `e.target` 向上查找最近的行容器：
<pre class="brush:php;toolbar:false;">const codeBlock = document.querySelector('.code-block');
codeBlock.addEventListener('mouseover', (e) => {
const lineEl = e.target.closest('.code-line, li[data-line]');
if (!lineEl) return;
const lineNumber = lineEl.dataset.line;
console.log('悬停在第', lineNumber, '行');
// 触发高亮、显示行信息、联动注释等
});
注意：`closest()` 是核心，它能跨多层嵌套准确找到最近的匹配祖先（包括自身），比反复 `parentNode` 更健壮；`data-line` 属性建议在渲染时由插件注入，保证唯一性和可读性。
处理快速移动导致的“漏触发”或“误判”
鼠标快速划过时，可能触发非行容器元素（如内联 token ``），造成 `closest()` 返回 null。可增加容错策略：
- 若 `e.target` 是行内 token，仍尝试 `e.target.parentElement.closest(...)` 多查一层
- 添加防抖（debounce）：对 `mouseover` 做 30ms 延迟执行，过滤掉瞬时划过
- 补充 `mouseleave` 清理状态，避免悬停态残留
兼容性与性能小提示
`closest()` 在 IE 中不支持，如需兼容可自行封装简易 polyfill，或改用 `matches()` + 循环 parent；但现代代码高亮场景通常无需支持 IE。另外，避免在 `mouseover` 中做重绘操作（如动态加 class 改背景色），优先用 CSS `:hover` 配合 `.code-line:hover`，JS 只负责数据逻辑（如记录当前行、触发 API）。
