closest实现行级悬停高亮需配合事件委托、语义化行容器（如code-line）及mouseover监听；须避免单code标签布局、处理行号干扰，并用缓存防重复触发。
在自研代码高亮插件中，用 closest 捕获鼠标悬停的“那一行”，关键不是靠它单独工作，而是配合事件委托 + 合理的 DOM 结构 + 行级语义化标记。直接对每行绑定 mouseenter 不现实（性能差、动态代码难维护），而 closest 正是解决“从任意子元素反查最近的行容器”的核心工具。
确保每行代码有明确的行容器（如 <div class="code-line">）
<p>这是 <code>closest 能生效的前提。高亮后，HTML 应类似：
<pre class="brush:php;toolbar:false;"><pre class="code-block">
<div class="code-line" data-line="1">
<span class="token keyword">function</span> hello() {</div>
<div class="code-line" data-line="2"> <span class="token console">console</span>.log(<span class="token string">"hi"</span>);</div>
<div class="code-line" data-line="3">};</div>
不要把所有代码塞进一个 <code> 标签里再用 white-space: pre 模拟换行——那样没有“行”的 DOM 实体，closest 就无从查找。
在 code-block 上监听 mouseover（非 mouseenter），用 event.target.closest('.code-line')
mouseover 冒泡且能捕获子元素触发；mouseenter 不冒泡，且只在目标本身触发，不适合委托。示例：
- 给
.code-block绑定一次监听：codeBlock.addEventListener('mouseover', handleHover) - 在
handleHover中：const lineEl = event.target.closest('.code-line'); - 若
lineEl存在，就说明鼠标正悬停在某一行内（包括其内部的 token、空格、甚至空白文本节点）
处理边界情况：空行、折叠行、行号列干扰
如果行号是独立列（比如绝对定位的 .line-numbers），鼠标移到行号上时 event.target 可能是行号元素，此时 .closest('.code-line') 会失败。解决方法：
- 让行号列和代码列包裹在同一行容器内：
<div class="code-line"> <span class="line-num">1</span><span class="line-content">...</span> </div> - 或在事件处理中兜底：
if (!lineEl) lineEl = event.target.closest('.code-block')?.querySelector(`[data-line="${getLineFromY(event)}"]`);（按 Y 坐标估算行号，适合复杂布局）
避免重复触发与性能抖动
鼠标在一行内移动会频繁触发 mouseover，但你通常只需要“进入新行”时响应。建议加简单防抖：
- 用
let currentHoveredLine = null缓存当前行元素 - 每次拿到
lineEl后，先比对lineEl !== currentHoveredLine - 仅当不同时才执行高亮、tooltip、数据上报等逻辑，并更新缓存
