如何实现元素始终跟随鼠标？现有代码仅鼠标在元素上时生效求助

问题根源 #

1. 事件绑定在document.body上，若body未占满视口或鼠标事件冒泡异常，会导致仅当鼠标落在div上时才触发移动逻辑。
2. 使用animate()会创建大量并行动画实例，造成元素移动不连贯，且left/top定位（对应元素左上角）和初始的transform: translate(-50%, -50%)冲突，导致鼠标位置与元素中心错位。

修复代码 #

JavaScript #

const move = document.getElementById("move");

// 绑定到document确保全局捕获鼠标移动事件
document.onpointermove = event => {
    const { clientX, clientY } = event;
    // 直接修改样式避免动画堆积，同时配合transform让元素中心跟随鼠标
    move.style.left = `${clientX}px`;
    move.style.top = `${clientY}px`;
}

CSS #

#move{
    background: linear-gradient(
        to right,
        #ff8e8e,
        #ff006a
    ) ;
    height: 300px;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    /* 让鼠标事件穿透div，确保事件始终被document捕获 */
    pointer-events: none;
}

HTML #

<div id="move"></div>

核心修改说明 #

• 事件绑定目标调整：把document.body.onpointermove改为document.onpointermove，确保鼠标在视口内任意位置移动都能触发事件。
• 替换animate为直接修改样式：避免多个动画实例堆积导致的延迟或卡顿问题，提升移动流畅度。
• 添加pointer-events: none：让div不拦截鼠标事件，保证即使鼠标在div上方，事件也能传递到document，持续触发移动逻辑。
• 保留transform: translate(-50%, -50%)：让div的中心位置跟随鼠标坐标，符合直观的跟随体验。

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