如何在3秒后运行鼠标悬停事件

Question

我需要当鼠标在某个元素上暂停 3 秒时执行一个函数。 我尝试使用 mouseover 事件来做到这一点，但问题是当鼠标进入元素时我的函数立即被触发

 element.addEventListener("mouseover", () => {
  setTimeout(() => {
      myFunction()
   },300)
  })

有没有办法在用户在元素上暂停 3 秒后触发 mouseover 事件？

有更好的方法吗？请帮助我

Answer 1

而不是

mouseover

，我可能会使用

mouseenter

，因为当鼠标在元素上移动时

mouseover

会重复触发。然后，如果鼠标在三秒结束之前离开元素，您可以使用

mouseleave

取消计时器。

类似这样的：

const target = document.querySelector(".target");
let timer = 0;
target.addEventListener("mouseenter", () => {
    timer = setTimeout(() => {
        timer = 0;
        console.log("Timer fired");
    }, 3000);
    console.log("Timer started");
});
target.addEventListener("mouseleave", () => {
    if (timer) {
        clearTimeout(timer);
        timer = 0;
        console.log("Timer cancelled");
    }
});

<div>Not a target</div>
<div>Not a target</div>
<div>Not a target</div>
<div>Not a target</div>
<div class="target">Target </div>
<div>Not a target</div>
<div>Not a target</div>
<div>Not a target</div>