position: fixed 是鼠标跟随指针的起点，因其完全脱离文档流、始终相对视口定位，且 clientX/clientY 坐标与之原点一致；需设 pointer-events: none 和 visibility: hidden，并用 Math.round 取整、减半宽高居中。
为什么 position: fixed 是鼠标跟随指针的起点
因为只有 fixed 能让元素完全脱离文档流、始终相对于视口定位，不受滚动、缩放、iframe 嵌套干扰。用 absolute 或 relative 在页面滚动后会偏移，根本没法跟住鼠标。
但要注意：它默认以视口左上角为原点，而鼠标坐标 clientX/clientY 也是相对于视口的——这点刚好对齐，省去换算。
- 必须给自定义指针设
pointer-events: none，否则它会拦截鼠标事件，导致点击失效 - 初始状态建议用
visibility: hidden而非display: none，避免首次移动时因重排造成卡顿 - 不要在
body上直接监听mousemove，如果页面有 iframe 或 shadow DOM，事件可能不冒泡；推荐用document监听
JS 更新 CSS 坐标最稳的方式：用 style.left + style.top
别用 transform: translate() 配合 getBoundingClientRect() 反推，那会引入浮点误差和帧率抖动。直接写内联样式最可控，浏览器也优化得最好。
关键不是“能不能”，而是“要不要加单位”和“要不要四舍五入”：
立即学习“前端免费学习笔记（深入）”；
-
element.style.left = e.clientX + 'px'—— 必须带px，否则无效 - 建议对
clientX和clientY取整：Math.round(e.clientX)，避免 sub-pixel 渲染模糊 - 如果指针本身有宽高（比如 24×24 的图标），记得减去一半做居中：
e.clientX - 12 - 不需要
requestAnimationFrame包一层——现代浏览器对连续style.left更新做了优化，直接在mousemove里赋值即可
移动端和缩放页面下容易失效的三个坑
桌面端跑得好好的，一到 iPad 或 Chrome 缩放到 125%，指针就飘走。问题不在 JS，而在 CSS 和事件源。
- 移动端没有
mousemove，得同时监听touchmove，且要用touches[0]取第一个触点，不能用changedTouches - 缩放时
clientX仍返回设备独立像素（DIP），但 CSS 像素已变；需用window.devicePixelRatio校正？错——clientX和 CSSpx在缩放下是自动对齐的，真正要处理的是meta viewport是否设了user-scalable=no（禁用缩放可规避问题） - 如果页面用了
transform: scale()包裹整个内容区，clientX不受影响，但指针位置要反向缩放计算，非常麻烦；建议改用 CSSzoom（仅支持 WebKit）或直接避免这种布局
兼容性与性能边界：哪些场景不该硬上自定义指针
不是所有“想要酷炫效果”的地方都适合上这个方案。真正在意体验时，得看实际瓶颈在哪。
- 低配安卓机或旧版 Safari 上，高频更新
left/top可能引发掉帧，尤其指针带阴影或渐变；此时建议降级为cursor: none+ 简单border-radius圆点 - WebGL 或 Canvas 全屏应用里，鼠标事件常被拦截，
mousemove触发稀疏甚至丢失，不如用canvas.getBoundingClientRect()+ 自己算坐标 - 如果页面大量使用
will-change: transform或contain: paint，自定义指针可能被裁剪——检查父容器是否设置了overflow: hidden或clip-path
最常被忽略的一点：指针图标的尺寸和热区。CSS 设置的 width/height 影响视觉大小，但鼠标点击热区永远以原始图像左上角为 (0,0)。如果用了 SVG，务必确认 viewBox 和 preserveAspectRatio 没把热区偏移。
