当前位置：首页 > JavaScript

js实现鼠标移动

2026-03-01 02:43:09JavaScript

监听鼠标移动事件

在JavaScript中，可以通过mousemove事件监听鼠标移动。该事件会在鼠标指针移动时触发。

document.addEventListener('mousemove', function(event) {
    console.log('鼠标位置:', event.clientX, event.clientY);
});

获取鼠标坐标

event对象包含鼠标当前的位置信息：

clientX和clientY：相对于浏览器窗口可视区域的坐标
pageX和pageY：相对于整个文档的坐标（包含滚动偏移）
screenX和screenY：相对于屏幕的坐标

document.addEventListener('mousemove', (e) => {
    console.log(`窗口坐标: ${e.clientX}, ${e.clientY}`);
    console.log(`文档坐标: ${e.pageX}, ${e.pageY}`);
    console.log(`屏幕坐标: ${e.screenX}, ${e.screenY}`);
});

跟随鼠标移动元素

可以通过改变元素的position为absolute或fixed，然后更新其left和top样式来实现跟随效果。

const follower = document.getElementById('follower');

document.addEventListener('mousemove', (e) => {
    follower.style.left = `${e.clientX}px`;
    follower.style.top = `${e.clientY}px`;
});

性能优化

频繁的mousemove事件可能影响性能，可以使用节流(throttle)技术减少处理频率。

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function() {
        const context = this;
        const args = arguments;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    }
}

document.addEventListener('mousemove', throttle(function(e) {
    console.log('节流后的鼠标位置:', e.clientX, e.clientY);
}, 100));

鼠标移动方向判断

通过比较前后位置的差值，可以判断鼠标移动方向。

let prevX = 0;
let prevY = 0;

document.addEventListener('mousemove', (e) => {
    const deltaX = e.clientX - prevX;
    const deltaY = e.clientY - prevY;

    if (Math.abs(deltaX) > Math.abs(deltaY)) {
        console.log(deltaX > 0 ? '向右移动' : '向左移动');
    } else {
        console.log(deltaY > 0 ? '向下移动' : '向上移动');
    }

    prevX = e.clientX;
    prevY = e.clientY;
});

鼠标移动速度计算

根据移动距离和时间差可以计算鼠标移动速度。

let lastTime = 0;
let lastX = 0;
let lastY = 0;

document.addEventListener('mousemove', (e) => {
    const now = Date.now();
    const timeDiff = now - lastTime;

    if (timeDiff > 0) {
        const distance = Math.sqrt(
            Math.pow(e.clientX - lastX, 2) + 
            Math.pow(e.clientY - lastY, 2)
        );
        const speed = distance / timeDiff;
        console.log(`移动速度: ${speed} 像素/毫秒`);
    }

    lastX = e.clientX;
    lastY = e.clientY;
    lastTime = now;
});

js实现鼠标移动