如何实现鼠标悬停元素且移动时持续调用函数，离开后停止触发

实现方案 #

核心使用mousemove事件即可满足需求，无需定时器。mousemove事件本身的触发逻辑就是仅当鼠标在绑定元素范围内移动时才会执行回调，鼠标静止、移出元素范围都不会触发，完全匹配你的要求，不会出现定时器方案中无操作也空转执行函数的问题。

基础实现代码 #

// 替换为你的目标元素ID
const targetDiv = document.getElementById('your-element-id');

// 你的目标业务函数
function handleMouseMove(event) {
  // 这里写你的业务逻辑，event参数可获取鼠标坐标、事件源等信息
  console.log('鼠标在元素上移动，坐标：', event.clientX, event.clientY);
}

// 绑定移动事件，仅在元素上移动时触发回调
targetDiv.addEventListener('mousemove', handleMouseMove);

// 可选：鼠标离开元素时执行清理逻辑
targetDiv.addEventListener('mouseleave', () => {
  console.log('鼠标已离开元素，停止触发函数');
  // 如果有需要重置的状态可以在这里处理
});

性能优化（可选） #

如果你的目标函数逻辑较重，mousemove高频触发可能导致性能问题，可以增加节流逻辑控制触发频率：

const targetDiv = document.getElementById('your-element-id');
let isThrottled = false;
const THROTTLE_DELAY = 100; // 触发间隔，单位毫秒，可自行调整

function handleMouseMove(event) {
  if (isThrottled) return;
  isThrottled = true;

  // 你的业务逻辑
  console.log('鼠标在元素上移动，坐标：', event.clientX, event.clientY);

  setTimeout(() => {
    isThrottled = false;
  }, THROTTLE_DELAY);
}

targetDiv.addEventListener('mousemove', handleMouseMove);

targetDiv.addEventListener('mouseleave', () => {
  // 离开时重置节流状态，避免下次进入元素时无法正常触发
  isThrottled = false;
});

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