鼠标移动太快并触发其他按钮功能 - JavaScript答案

【问题标题】：Mouse moves too fast and triggers other button functions - JavaScript鼠标移动太快并触发其他按钮功能 - JavaScript
【发布时间】：2019-02-16 21:45:10
【问题描述】：

我有一个带有 12 个按钮的 div，按网格布局。每个按钮都有一个 JS mouseenter() 可以淡出其他 11 个按钮。当您缓慢移动鼠标时效果很好。但是，如果您将鼠标移动到另一个按钮上的速度过快，则 mouseleave() 函数不会运行，并且错误的按钮会淡入或淡出。正在研究，试图找出解决这个问题的最佳方法。

添加/删除事件监听器是什么时候的问题？或者设置某种延迟，以便 buttonFade() 函数仅在鼠标停放几毫秒时运行？

我现在的页面是 www.finleyfilms.com。

【问题讨论】：

标签： javascript

【解决方案1】：

您应该使用setTimeout 并等待，例如 500 毫秒，然后触发您的关键帧或其他 css。否则，如果鼠标在 500 毫秒之前移动，则取消超时。

const timeoutId = setTimeout(function() {
  button.addClass("realTrigger");
}, 500);
button.mouseleave(function() {
  clearTimeout(timeoutId);
  button.removeClass("realTrigger");
});

【讨论】：