当前位置：首页 > JavaScript

js实现mousemove

2026-02-02 02:50:16JavaScript

监听 mousemove 事件

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

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

获取鼠标坐标

mousemove 事件对象包含多个属性可以获取鼠标位置信息：

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

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

性能优化

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

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

const optimizedHandler = throttle((e) => {
  console.log('节流处理:', e.clientX);
}, 100);

document.addEventListener('mousemove', optimizedHandler);

应用示例：元素跟随鼠标

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

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

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

移除事件监听

当不再需要监听时，应该移除事件处理器：

js实现mousemove

const handler = function(e) {
  console.log(e.clientX);
};

// 添加监听
document.addEventListener('mousemove', handler);

// 移除监听 
document.removeEventListener('mousemove', handler);