如何用JS创建简单光标跟踪小球？附代码求错误排查

已创建渐变小球，预期实现效果为：鼠标在页面任意位置移动时，小球同步跟随光标移动。添加mousemove相关事件代码后功能失效，现有代码如下：

原有JS代码 #

let cursor=document.querySelector('.ball');

cursor.addEventListener('onmousemove', (e)=>{
    let x= e.pageX;
    let y= e.pageY;

    cursor.style.left= x+'px';
    cursor.style.top= y+'px';
});

原有CSS代码 #

.ball{
    background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(4,116,191,1) 60%, rgba(0,212,255,1) 97%);
    height: 70px;
    width: 70px;
    border-radius: 50%;
    box-shadow: 0px 0px 13px 1px rgba(9,9,121,0.73);
    transition: 0.1s;
    pointer-events: none;
    position: fixed;
}

原有HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="stylesheet.css">
    <title>Document</title>
</head>
<body>
    <div class="ball"></div>

    <script src="script.js"></script>
</body>
</html>

代码存在两个核心问题导致功能失效：

• 事件名称书写错误：使用addEventListener方法绑定事件时，事件类型参数不需要携带on前缀。onmousemove是DOM0级事件绑定的属性写法（如element.onmousemove = function(){}），DOM2级绑定需使用不带前缀的mousemove作为事件名。
• 事件绑定目标错误：当前将鼠标移动事件绑定在了.ball小球元素上，一方面小球设置了pointer-events: none属性，本身不会响应任何鼠标事件；另一方面需求是监听全页面的鼠标移动，事件应该绑定在document或window对象上，才能捕获页面任意位置的鼠标移动行为。

另外存在一个体验优化点：当前直接将鼠标坐标赋值给小球的left、top属性，会让小球左上角对准光标，视觉上存在偏移，减去小球宽高的一半（35px）可以让小球中心对准光标，跟随效果更自然。

修正后的JS代码 #

let cursor = document.querySelector('.ball');

// 事件绑定到全局document，事件名使用mousemove
document.addEventListener('mousemove', (e) => {
    let x = e.pageX;
    let y = e.pageY;
    // 减去35px偏移让小球中心对准光标，不需要该效果可删除-35
    cursor.style.left = (x - 35) + 'px';
    cursor.style.top = (y - 35) + 'px';
});

修正后的CSS代码（仅补充初始位置避免小球加载时出现在角落，原有规则全部保留） #

.ball{
    background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(4,116,191,1) 60%, rgba(0,212,255,1) 97%);
    height: 70px;
    width: 70px;
    border-radius: 50%;
    box-shadow: 0px 0px 13px 1px rgba(9,9,121,0.73);
    transition: 0.1s;
    pointer-events: none;
    position: fixed;
    /* 新增初始位置 */
    left: 0;
    top: 0;
}

HTML代码无需修改，替换JS和CSS后即可实现小球跟随鼠标的效果。

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