鼠标移动时实时更新辅助线需监听mousemove事件，用clientx/clienty获取视口坐标并动态设置fixed定位的div元素left/top值，避免使用pagex/pagey；dom应预创建，更新逻辑用requestanimationframe包裹，并考虑缩放修正。
鼠标移动时实时更新辅助线位置
核心是监听 mousemove 事件，用 event.clientX 和 event.clientY 获取视口坐标，再动态设置两个 <div> 元素的 <code>left / top 值。注意必须给辅助线元素设置 position: fixed（或 absolute 配合父容器 position: relative），否则滚动页面时会错位。
常见错误：直接用 pageX/pageY —— 它们包含滚动偏移，在滚动页面时会导致辅助线“漂移”。clientX/clientY 才是相对于当前可视窗口的坐标，配合 fixed 定位才稳定。
- 辅助线 DOM 要提前插入，避免每次事件中反复创建节点
- 用
requestAnimationFrame包裹更新逻辑，防止高频触发导致卡顿 - 若页面有缩放（
transform: scale()），需额外除以window.devicePixelRatio或监听resize修正
水平线和垂直线的样式与性能优化
两条线推荐用极细的 <div>（如 <code>height: 1px /
），而非伪元素或 border——后者在频繁重绘时更容易触发 layout。
<p>关键样式示例：</p>
<pre class="brush:php;toolbar:false;">.guide-h {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 1px;
background: rgba(0, 120, 255, 0.6);
pointer-events: none;
z-index: 9999;
}
.guide-v {
position: fixed;
top: 0;
left: 0;
width: 1px;
height: 100vh;
background: rgba(0, 120, 255, 0.6);
pointer-events: none;
z-index: 9999;
}
pointer-events: none
z-index 要足够高，但别盲目设 999999，避免干扰其他浮层逻辑。
- 不要用
box-shadow模拟线条——模糊半径会带来额外绘制开销 - 避免在 CSS 中使用
calc()动态计算位置，全部交由 JS 设置style.left/style.top - 移动端需额外监听
touchmove，且用touches[0]取坐标
兼容性与边界处理
IE11 不支持 pointer-events: none 对 fixed 元素的穿透，若需兼容，得改用 opacity: 0.001 + z-index: -1 组合，并确保底层元素 z-index 足够高。
边界问题常被忽略：当鼠标靠近窗口边缘（如 clientX ），辅助线仍应完整显示，不能被裁剪。因此要确保容器宽度/高度用 <code>100vw/100vh，而非 100%。
- Firefox 在某些 zoom 级别下会将
1px渲染为 0.5px，视觉上变虚，可改用min-height: 2px并调低透明度补偿 - 辅助线默认应隐藏（
display: none），仅在鼠标进入目标区域（如body或指定容器）时display: block，减少空转消耗 - 离开页面时记得移除
mousemove监听器，尤其单页应用中容易内存泄漏
pointer-events: none 的兼容写法和 requestAnimationFrame 的节流包裹。
