本文详解鼠标跟随器（Mouse Follower）停止响应的常见原因——在 mousemove 回调中反复调用 addEventListener 导致监听器爆炸式叠加，最终因作用域错误和变量引用失效而失灵，并提供简洁可靠的重构方案。
本文详解鼠标跟随器（mouse follower）停止响应的常见原因——在 `mousemove` 回调中反复调用 `addeventlistener` 导致监听器爆炸式叠加，最终因作用域错误和变量引用失效而失灵，并提供简洁可靠的重构方案。
在实现平滑鼠标跟随效果时，一个典型误区是将 DOM 操作逻辑与事件绑定逻辑混为一谈。观察原始代码可发现：MouseFollower() 函数内部每次都被重新注册一个 mousemove 监听器，而该函数本身又在外部 mousemove 事件中被高频调用（每毫秒可能触发多次）。这不仅造成严重的性能浪费，更关键的是——内层监听器中的 dets 变量在函数定义时并不存在，导致运行时报错 ReferenceError: dets is not defined，进而使整个跟随逻辑静默失败。
此外，原代码还存在其他结构性缺陷：
- timeout 未声明为闭包私有变量（应使用 let timeout 避免全局污染）；
- xscale/yscale 被错误地用于限制鼠标位移差值（xdiff/ydiff），而非缩放比例本身；
- 尾部 setTimeout 中的 translate(... scale(1,1)) 覆盖了前序的缩放效果，破坏动效连贯性。
✅ 正确做法是：仅绑定一次 mousemove 监听器，在其回调中统一计算、更新并应用变换。以下是优化后的完整实现：
function initMouseFollower() {
const follower = document.querySelector("#circleScroll");
let xscale = 1;
let yscale = 1;
let xprev = 0;
let yprev = 0;
let timeout;
window.addEventListener("mousemove", function (dets) {
// 清除上一次延迟重置
clearTimeout(timeout);
// 计算位移差（用于动态缩放反馈）
const xdiff = dets.clientX - xprev;
const ydiff = dets.clientY - yprev;
xprev = dets.clientX;
yprev = dets.clientY;
// 使用 clamp 动态约束缩放系数（例如：快速移动时放大，缓慢时缩小）
xscale = gsap.utils.clamp(0.8, 1.4, Math.abs(xdiff) * 0.1);
yscale = gsap.utils.clamp(0.8, 1.4, Math.abs(ydiff) * 0.1);
// 立即应用变换：位置 + 缩放
follower.style.transform = `translate(${dets.clientX}px, ${dets.clientY}px) scale(${xscale}, ${yscale})`;
// 100ms 后恢复默认缩放（模拟“回弹”效果）
timeout = setTimeout(() => {
follower.style.transform = `translate(${dets.clientX}px, ${dets.clientY}px) scale(1, 1)`;
}, 100);
});
}
// 启动跟随器
initMouseFollower();? 关键注意事项：
- ✅ 绝不嵌套 addEventListener：所有 DOM 更新必须在已有监听器回调中完成，避免监听器泄漏与作用域混乱；
- ✅ clamp 的输入应为有意义的数值（如加权后的位移），而非原始像素差（xdiff 可能为负或过大）；
- ✅ 使用 let 声明状态变量（timeout, xscale 等），确保闭包内变量可正确更新；
- ✅ transform 中 translate 和 scale 需用空格分隔（不是逗号），且推荐写成 translate(...) scale(...) 显式结构，提高可维护性；
- ⚠️ 若页面存在滚动或缩放，需额外处理 clientX/clientY 到容器坐标的映射，此处假设为视口绝对定位。
通过上述重构，鼠标跟随器将稳定响应、平滑缩放，并具备良好的可扩展性——后续如需添加旋转、透明度变化等效果，只需在同一回调中追加对应样式即可。
