clientx/clienty 相对于视口左上角，滚动时坐标“错位”；pagex/pagey 相对于文档左上角，滚动不影响定位，但 ie8-需用 scrollleft/scrolltop 补偿。
mousemove 事件里 clientX/clientY 和 pageX/pageY 的区别
直接用 clientX 和 clientY 获取坐标最常见，但它们只相对于视口左上角，页面滚动后光标位置会“错位”——比如你拖动滚动条后继续移动鼠标，元素却往反方向偏移。这时候得换 pageX 和 pageY，它始终以整个文档左上角为原点，滚动不影响定位精度。
不过要注意：IE8 及更早版本不支持 pageX/pageY，如果还要兼容，得手动加 scrollLeft/scrollTop 补偿：
const x = e.clientX + document.documentElement.scrollLeft; const y = e.clientY + document.documentElement.scrollTop;
防抖和节流不是可选项，是必须加的
原生 mousemove 在现代浏览器里每秒触发 60+ 次甚至上百次，不做限制的话，频繁更新 DOM 或计算坐标会立刻卡顿，尤其在低配设备或复杂页面中。
推荐用时间戳节流（比定时器更稳）：
let lastTime = 0;
element.addEventListener('mousemove', (e) => {
const now = Date.now();
if (now - lastTime > 16) { // 约 60fps
updateFollower(e.pageX, e.pageY);
lastTime = now;
}
});
- 16ms 是底线，低于这个值人眼几乎看不出差异，再密反而浪费 CPU
- 别用
setTimeout防抖来处理跟随，会导致明显延迟感 - 如果只是做视觉反馈（比如小圆点），CSS
transform: translate()比修改left/top性能高得多
CSS transform 移动 follower 元素时别忘了设置 position
很多人写完 JS 坐标逻辑，发现元素根本不跟着动——八成是忘了给 follower 元素加 position: fixed 或 position: absolute。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
transform 不会改变文档流，但它依赖父容器的定位上下文：
- 用
position: fixed：坐标基于视口，适合全局跟随（如自定义光标） - 用
position: absolute：坐标基于最近的已定位祖先，适合局部区域跟随（如画布内拖拽提示） - 漏掉
pointer-events: none会让 follower 元素拦截鼠标事件，导致mousemove中断
移动端 touchmove 的坐标要单独适配
PC 端的 mousemove 在手机上完全不触发，必须监听 touchmove 并从 touches[0] 里取值。
关键差异：
-
touchmove默认会触发页面滚动，得加e.preventDefault()（但小心别锁死正常滚动） - 坐标字段是
touches[0].clientX，不是e.clientX - 一个手指对应一个
Touch对象，多指场景需自行选主指针（通常取第一个）
简单兼容写法：
function handleMove(e) {
const x = e.type === 'touchmove'
? e.touches[0].pageX
: e.pageX;
const y = e.type === 'touchmove'
? e.touches[0].pageY
: e.pageY;
updateFollower(x, y);
}
实际做下来，最难调的往往不是坐标计算，而是 scroll、zoom、iframe 嵌套、缩放（transform: scale()）这些叠加状态下的坐标映射。尤其是混合了 CSS 缩放和页面滚动时，pageX 也救不了，得结合 getBoundingClientRect() 手动校正。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
