jQuery hover事件异常：窗口Resize至移动端后仍触发hover

这个问题我之前也遇到过！核心原因是你只在页面初始化的时候执行了一次事件绑定逻辑，窗口 resize 后没有动态更新事件绑定——原来的 mouseover 事件还挂在元素上，所以即使尺寸变小了，它还是会触发。

下面是具体的修复方案，思路是动态绑定/解绑事件，配合窗口 resize 监听：

1. 抽离事件处理逻辑 #

把导航的事件绑定/解绑逻辑抽成独立函数，这样可以在窗口尺寸变化时重复调用：

// 替换成你实际的导航项选择器
const navItems = document.querySelectorAll('.nav-item');

// 统一处理事件绑定的函数
function setupNavigationEvents(isDesktop) {
  // 先清除所有已绑定的事件，避免重复绑定导致多次触发
  navItems.forEach(item => {
    item.removeEventListener('mouseover', handleNavHover);
    item.removeEventListener('mouseout', handleNavLeave);
    item.removeEventListener('click', handleNavClick);
  });

  if (isDesktop) {
    // 桌面端：绑定hover事件
    navItems.forEach(item => {
      item.addEventListener('mouseover', handleNavHover);
      item.addEventListener('mouseout', handleNavLeave);
    });
  } else {
    // 移动端：绑定click事件
    navItems.forEach(item => {
      item.addEventListener('click', handleNavClick);
    });
  }
}

// 具体的hover展开逻辑（替换成你的代码）
function handleNavHover(e) {
  const dropdown = e.target.querySelector('.nav-dropdown');
  if (dropdown) dropdown.style.display = 'block';
}

// 具体的hover收起逻辑（替换成你的代码）
function handleNavLeave(e) {
  const dropdown = e.target.querySelector('.nav-dropdown');
  if (dropdown) dropdown.style.display = 'none';
}

// 具体的click切换逻辑（替换成你的代码）
function handleNavClick(e) {
  e.preventDefault();
  const dropdown = e.target.querySelector('.nav-dropdown');
  if (dropdown) dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}

2. 监听窗口变化，动态更新事件 #

修改你的responsiveJs函数，并且添加窗口 resize 监听（记得加防抖，避免频繁触发）：

function responsiveJs() {
  const isDesktop = window.innerWidth > 768;
  setupNavigationEvents(isDesktop);
}

// 页面加载时初始化事件
window.addEventListener('load', responsiveJs);

// 窗口resize时触发，添加防抖优化性能
let resizeDebounce;
window.addEventListener('resize', () => {
  clearTimeout(resizeDebounce);
  resizeDebounce = setTimeout(responsiveJs, 250); // 250ms延迟，可根据需求调整
});

为什么这样有效？ #

每次窗口尺寸变化时，我们都会先清除所有旧的事件绑定，再根据当前设备类型重新绑定对应的事件。这样就不会出现“旧事件残留”的问题，不用刷新页面也能在桌面/移动端模式间无缝切换。

额外注意点 #

• 防抖函数的延迟时间可以调整，250ms是比较通用的数值，既能保证响应及时，又不会频繁触发函数
• 如果你的项目用了框架（比如React/Vue），可以用框架的响应式状态来处理，核心思路还是“根据屏幕尺寸动态切换交互逻辑”
• 也可以结合CSS媒体查询隐藏/显示某些交互，但JS动态绑定事件的方式更可靠，避免移动端出现hover延迟的问题

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