当前位置：首页 > JavaScript

js实现鼠标移动

2026-01-30 11:36:10JavaScript

监听鼠标移动事件

使用 mousemove 事件监听鼠标移动，通过回调函数获取鼠标坐标（clientX 和 clientY）。

document.addEventListener('mousemove', (event) => {
  const x = event.clientX;
  const y = event.clientY;
  console.log(`鼠标位置：X=${x}, Y=${y}`);
});

跟踪鼠标移动轨迹

通过记录坐标点实现轨迹跟踪，可用于绘图或动画效果。

const points = [];
document.addEventListener('mousemove', (event) => {
  points.push({ x: event.clientX, y: event.clientY });
  if (points.length > 100) points.shift(); // 限制记录数量
});

实现元素跟随鼠标

动态更新元素位置（如 div），使其跟随鼠标移动。

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

限制触发频率

使用节流（throttle）优化性能，避免高频触发。

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

document.addEventListener('mousemove', throttle((event) => {
  console.log(`节流后的坐标：${event.clientX}, ${event.clientY}`);
}, 100));

检测移动方向

通过比较前后坐标差值判断移动方向（左/右/上/下）。

js实现鼠标移动

let prevX = 0;
document.addEventListener('mousemove', (event) => {
  const direction = event.clientX > prevX ? '右' : '左';
  prevX = event.clientX;
  console.log(`移动方向：${direction}`);
});