如何实现鼠标在元素上停留3秒后执行指定函数？

你的问题核心是没有在鼠标离开时取消已启动的定时器，导致即使鼠标提前离开，定时器到期后仍会执行函数。下面是两种可行的实现方案：

基础实现（mouseover + mouseout） #

通过一个变量存储定时器ID，在鼠标离开元素时清除定时器：

// 声明变量存储定时器ID
let hoverTimer;

element.addEventListener("mouseover", () => {
  // 启动3秒定时器，保存ID到变量
  hoverTimer = setTimeout(() => {
    myFunction();
  }, 3000);
});

element.addEventListener("mouseout", () => {
  // 鼠标离开时清除定时器
  clearTimeout(hoverTimer);
});

优化实现（mouseenter + mouseleave） #

如果你的元素包含子元素，mouseover会因为事件冒泡反复触发（鼠标进入子元素时也会触发父元素的mouseover），此时用mouseenter和mouseleave更合适——这两个事件不会冒泡，只会在鼠标真正进入/离开元素本身时触发：

let hoverTimer;

element.addEventListener("mouseenter", () => {
  hoverTimer = setTimeout(() => {
    myFunction();
  }, 3000);
});

element.addEventListener("mouseleave", () => {
  clearTimeout(hoverTimer);
});

原理说明 #

• 鼠标进入元素时，启动一个3秒的定时器，并将定时器ID保存到变量中；
• 如果鼠标在3秒内离开元素，立即调用clearTimeout清除这个定时器，函数就不会执行；
• 只有当鼠标在元素上停留满3秒，定时器才会到期并触发myFunction。

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