求助：快速划过相邻兄弟元素时onMouseOver事件被多元素同时触发

问题分析 #

快速划过紧邻的兄弟元素时，浏览器会连续触发每个元素的onMouseOver事件——这是因为鼠标移动过程中会依次进入每个元素，事件队列堆积触发请求后，最终导致多个事件被执行。如果只希望当前最终悬停的元素触发事件，而非所有划过的元素，可以通过以下几种方式解决：

方法1：使用防抖（Debounce）函数 #

防抖的核心是延迟事件执行，若延迟时间内鼠标进入其他元素，就取消之前的事件回调，仅执行最后一次触发的回调，过滤掉中间划过的元素触发请求。

示例代码（JavaScript）：

// 防抖函数实现
function debounce(func, delay = 100) {
  let timerId;
  return function(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 绑定带防抖的mouseover事件
const siblingElements = document.querySelectorAll('.sibling-item');
siblingElements.forEach(el => {
  el.addEventListener('mouseover', debounce(function(e) {
    // 业务逻辑示例：高亮当前悬停元素
    siblingElements.forEach(item => item.classList.remove('active'));
    this.classList.add('active');
    console.log('当前触发元素：', e.target);
  }, 100));
});

方法2：替换为mouseenter事件 #

mouseenter事件不会冒泡，且仅在鼠标首次进入元素本身时触发（不会因子元素触发），相比mouseover在快速划过场景下触发频率更低、精准度更高。如果需求是进入元素即触发，但要避免误触发，可直接替换事件类型：

示例代码：

const siblingElements = document.querySelectorAll('.sibling-item');
siblingElements.forEach(el => {
  el.addEventListener('mouseenter', function(e) {
    // 业务逻辑示例
    siblingElements.forEach(item => item.classList.remove('active'));
    this.classList.add('active');
  });
});

方法3：事件委托+防抖（适合动态元素场景） #

如果兄弟元素数量较多或动态生成，推荐在父元素上监听事件（减少绑定数量），同时配合防抖过滤无效触发：

示例代码：

const parentElement = document.querySelector('.siblings-container');
const debouncedHandleHover = debounce(function(e) {
  if (e.target.classList.contains('sibling-item')) {
    // 业务逻辑示例
    document.querySelectorAll('.sibling-item').forEach(item => item.classList.remove('active'));
    e.target.classList.add('active');
  }
}, 100);

parentElement.addEventListener('mouseover', debouncedHandleHover);

注意事项 #

• 防抖延迟时间可根据场景调整（100-200ms为常用区间），过短可能达不到过滤效果，过长会导致交互延迟。
• 若需要即时触发但只保留最后一个结果，防抖是最优选择；若仅需进入元素时触发一次，mouseenter更轻量。

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