当前位置：首页 > JavaScript

js实现mousemove

2026-03-15 02:19:25JavaScript

监听鼠标移动事件

在JavaScript中，可以通过监听mousemove事件来跟踪鼠标在页面上的移动。以下是基本实现方式：

document.addEventListener('mousemove', function(event) {
    console.log('Mouse X:', event.clientX, 'Mouse Y:', event.clientY);
});

获取鼠标坐标

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

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

element.addEventListener('mousemove', (e) => {
    const x = e.pageX - element.offsetLeft;
    const y = e.pageY - element.offsetTop;
});

性能优化处理

高频触发的mousemove事件可能导致性能问题，可以通过节流(throttle)优化：

js实现mousemove

function throttle(fn, delay) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall < delay) return;
        lastCall = now;
        fn.apply(this, args);
    }
}

document.addEventListener('mousemove', throttle(function(e) {
    // 处理逻辑
}, 16)); // 约60fps

元素跟随鼠标

实现元素跟随鼠标移动的效果：

const follower = document.getElementById('follower');
document.addEventListener('mousemove', (e) => {
    follower.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
});

检测移动方向

通过比较前后坐标计算移动方向：

js实现mousemove

let prevX = 0, prevY = 0;
document.addEventListener('mousemove', (e) => {
    const dx = e.clientX - prevX;
    const dy = e.clientY - prevY;
    prevX = e.clientX;
    prevY = e.clientY;

    if (Math.abs(dx) > Math.abs(dy)) {
        console.log(dx > 0 ? '向右' : '向左');
    } else {
        console.log(dy > 0 ? '向下' : '向上');
    }
});

鼠标移动轨迹记录

记录鼠标移动路径并绘制：

const points = [];
document.addEventListener('mousemove', (e) => {
    points.push({ x: e.clientX, y: e.clientY });
    if (points.length > 100) points.shift();

    // 使用canvas绘制轨迹
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    points.forEach((p, i) => {
        if (i === 0) ctx.moveTo(p.x, p.y);
        else ctx.lineTo(p.x, p.y);
    });
    ctx.stroke();
});

特定区域内的鼠标移动

只在特定元素内监听鼠标移动：

const box = document.getElementById('box');
box.addEventListener('mousemove', (e) => {
    // 相对于box元素的坐标
    const x = e.clientX - box.getBoundingClientRect().left;
    const y = e.clientY - box.getBoundingClientRect().top;
    console.log(`Box内坐标: (${x}, ${y})`);
});