如何实现onmouseover事件仅触发一次函数？

先梳理你代码里的问题，再给出两种实现仅触发一次动画的方案：

1. 先修正代码中的语法错误 #

你的move函数最后一行的move(){};是无效语法，直接删除这行即可。

2. 实现仅执行一次的两种方案 #

方案一：用标记变量限制动画执行次数 #

通过一个变量记录动画是否已经完成，后续鼠标悬停时直接跳过执行：

<img src="img/logot2.png" id="logoutjs" onmouseover="move()" alt="Logo" width="100" height="30" class="d-inline-block align-text-top" style="position: absolute; right: 8px;">

<script>
  var id = null;
  // 标记动画是否已执行完毕
  var animationCompleted = false;

  function move() {
    // 如果动画已经执行过，直接返回
    if (animationCompleted) return;

    var elem = document.getElementById("logoutjs");   
    var pos = 0;
    clearInterval(id);
    id = setInterval(frame, 5);

    function frame() {
      if (pos == -110) {
        clearInterval(id);
        // 动画结束后标记为已完成
        animationCompleted = true;
      } else {
        pos--;
        elem.style.left = pos + 'px'; 
      }
    }
  }
</script>

方案二：触发后移除鼠标悬停事件监听 #

动画触发后，直接移除元素的mouseover事件监听，彻底阻止后续悬停触发函数：

<img src="img/logot2.png" id="logoutjs" alt="Logo" width="100" height="30" class="d-inline-block align-text-top" style="position: absolute; right: 8px;">

<script>
  var id = null;
  var elem = document.getElementById("logoutjs");
  // 用事件绑定替代内联onmouseover，方便后续移除
  elem.addEventListener('mouseover', move);

  function move() {
    var pos = 0;
    clearInterval(id);
    id = setInterval(frame, 5);

    function frame() {
      if (pos == -110) {
        clearInterval(id);
        // 动画结束后移除事件监听
        elem.removeEventListener('mouseover', move);
      } else {
        pos--;
        elem.style.left = pos + 'px'; 
      }
    }
    // 若想触发时立刻停止后续监听（不管动画是否结束），可把removeEventListener移到此处
  }
</script>

方案说明 #

• 方案一适合需要保留悬停事件，但不想重复执行动画的场景；
• 方案二更彻底，直接移除事件绑定，后续鼠标悬停不会再触发任何相关逻辑。

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