如何用matchMedia在1025px以下视口禁用jQuery菜单hover效果

问题根源 #

你当前的代码存在两个关键问题：

• 仅在页面首次加载时判断视口宽度并绑定事件，窗口尺寸变化后不会自动更新事件状态
• event.preventDefault() 无法阻止 mouseenter/mouseleave 事件，这类事件没有浏览器默认行为，绑定空事件也无法覆盖已存在的事件处理函数

修改后的代码 #

$(document).ready(function () {
  // 封装hover事件的绑定/解绑逻辑
  function toggleMenuHover(enable) {
    const $menuHover = $("#menuhover");
    const $siteNav = $("#site-navigation");
    
    // 先移除已有的事件监听，避免重复绑定
    $menuHover.off("mouseenter mouseleave");
    
    if (enable) {
      // 启用hover效果
      $menuHover.on("mouseenter", function () {
        $siteNav.stop(true, false);
        $siteNav.animate({ left: "-2rem", opacity: "1" }, 300);
      });
      
      $menuHover.on("mouseleave", function () {
        $siteNav.stop(true, false);
        $siteNav.css({ left: "-480px", opacity: "0" });
      });
    }
  }

  // 初始化时根据当前视口设置状态
  const mediaQuery = window.matchMedia("(min-width: 1025px)");
  toggleMenuHover(mediaQuery.matches);

  // 监听视口变化，动态调整hover事件
  mediaQuery.addEventListener("change", function(e) {
    toggleMenuHover(e.matches);
  });

  // 移动端按钮逻辑保持不变
  $("#open-navigation-mobile").on("click", function () {
    $("#site-navigation").animate({ left: "-1rem", opacity: "1" }, 250);
    $("#close-navigation-mobile").css({ display: "flex" });
    $("#open-navigation-mobile").css({ display: "none" });
  });
  
  $("#close-navigation-mobile").on("click", function () {
    $("#site-navigation").animate({ left: "-100vw", opacity: "0" }, 250);
    $("#close-navigation-mobile").css({ display: "none" });
    $("#open-navigation-mobile").css({ display: "flex" });
  });
  
  $(window).on("beforeunload", function () {
    $("#site-navigation").animate({ left: "-100vw", opacity: "0" }, 250);
    $("#close-navigation-mobile").css({ display: "none" });
    $("#open-navigation-mobile").css({ display: "flex" });
  });
});

关键改进点 #

• 用 toggleMenuHover 函数统一处理hover事件的绑定与解绑，每次调用先移除旧事件，避免重复绑定
• 使用 matchMedia 的 change 事件监听视口宽度变化，实时更新事件状态
• 移除了无效的 event.preventDefault() 代码，改用直接移除事件监听的方式禁用hover效果

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