网页虚拟鼠标跟随原鼠标异常：原因排查与解决方案咨询

1. clientY未定义/功能间歇性失效 #

你在mousemove事件监听里加的async关键字完全多余，更关键的是：浏览器对mousemove这类高频事件的Event对象是复用回收的，当setTimeout的异步回调执行时，原event对象已经被浏览器清空或回收，导致无法获取clientX/clientY，进而出现未定义错误和功能失效。

2. 虚拟鼠标间歇性闪烁 #

• setTimeout(100)的延迟导致虚拟鼠标和原鼠标的位置更新不同步，且mousemove触发频率极高（每秒可达数十次），会堆积大量未执行的回调，导致样式更新混乱，出现闪烁。
• 你的transform: translate(${mouseLeft},${mouseTop})没有加px单位，部分浏览器会无法解析这个样式，导致虚拟鼠标位置异常甚至短暂不可见。

直接移除不必要的异步逻辑，同步更新虚拟鼠标位置，同时补全样式单位：

基础修正版JS代码 #

const dummyMouse = document.querySelector('.dummy-mouse');
document.addEventListener('mousemove', event => {
    if (!dummyMouse) return;
    // 按需求设置x+500px的偏移
    const mouseLeft = event.clientX + 500;
    const mouseTop = event.clientY;
    // 必须补充px单位确保样式生效
    dummyMouse.style.transform = `translate(${mouseLeft}px, ${mouseTop}px)`;
});

优化版：用requestAnimationFrame提升流畅度 #

如果需要更丝滑的动画效果，可以结合requestAnimationFrame让样式更新和浏览器渲染帧同步，避免高频事件导致的性能问题：

const dummyMouse = document.querySelector('.dummy-mouse');
let lastX = 0;
let lastY = 0;

document.addEventListener('mousemove', event => {
    lastX = event.clientX + 500;
    lastY = event.clientY;
});

function updateDummyMouse() {
    if (dummyMouse) {
        dummyMouse.style.transform = `translate(${lastX}px, ${lastY}px)`;
    }
    requestAnimationFrame(updateDummyMouse);
}

updateDummyMouse();

调整后的CSS（可选优化） #

.dummy-mouse{
    position: fixed;
    height: 120px;
    width: 120px;
    background-color: red;
    border-radius: 50%;
    top: 0;
    left: 0;
    z-index: 999; /* 调高层级避免被其他元素遮挡 */
    pointer-events: none; /* 防止虚拟鼠标干扰原鼠标的点击/hover交互 */
}

如果你的业务场景需要虚拟鼠标有固定延迟（比如模拟远程用户操作），不要用setTimeout直接堆积回调，改用节流+单次延迟的方式：

const dummyMouse = document.querySelector('.dummy-mouse');
let isUpdating = false;

document.addEventListener('mousemove', event => {
    if (!dummyMouse || isUpdating) return;
    isUpdating = true;
    
    setTimeout(() => {
        const mouseLeft = event.clientX + 500;
        const mouseTop = event.clientY;
        dummyMouse.style.transform = `translate(${mouseLeft}px, ${mouseTop}px)`;
        isUpdating = false;
    }, 100);
});

这样可以避免多个setTimeout回调堆积，减少闪烁和失效问题。

内容的提问来源于stack exchange，提问作者reed richards