Javascript 如何防止在addEventListener中重复执行函数？

我试图在用户的光标位于包含多个元素的HTML元素上时启动动画。参考以下代码：

<div ref={exampleReference}>
  <img src='...' />
  <div>
    <h1> Some text <h1/>
    <p> Lorem ipsum etc. </p>
  </div>
</div>

此元素正在侦听的事件是

mouseover

。它可以工作，但每次我在容器元素之间移动光标：

、

或

，事件侦听器都会执行回调函数，比如从

到

---

那么，如何防止每次用户的光标位置在主

div

容器元素之间发生变化时执行该函数呢？换句话说，我只希望在光标插入主

div

容器后执行animtaed函数。

使用a而不是

mouseover

事件。

使用a而不是

mouseover

事件。

您应该使用

useffect

的第二个参数，即，依赖项数组

那么电话就是这样的

useffect（（）=>{
例如reference.current.adeventListener（“mouseover”，（）=>{…}
}，[exampleReference.current]）；//这里是这个

---

您可以在此处阅读更多信息：

您应该为

useffect

使用第二个参数，即依赖项数组

那么电话就是这样的

useffect（（）=>{
例如reference.current.adeventListener（“mouseover”，（）=>{…}
}，[exampleReference.current]）；//这里是这个

---

您可以在此处了解更多信息：

我尝试了

mouseenter

，但结果几乎相同。当我缓慢移动光标时，在元素之间它不会执行函数，但当我移动得更快时会执行。我尝试了

mouseenter

但结果几乎相同。当我缓慢移动光标时，在元素之间它会执行esn不执行该函数，但当我将其移动得更快时，它会执行。

  useEffect(() => {
    exampleReference.current.addEventListener("mouseover", () => {...} 
});