网站About页面菜单href=#链接失效问题求解

根因说明 #

你的菜单在About页面失效的核心原因是菜单的交互事件绑定逻辑使用了通用的a[href="#"]选择器，没有限定仅匹配菜单触发按钮，导致和About页面里用于图片交互的a[href="#"]元素发生事件冲突，要么是菜单事件被图片交互的事件阻止冒泡，要么是事件委托时匹配到非菜单元素导致逻辑错乱。

可行解决办法（按优先级从高到低排序） #

• 方案1：优化菜单事件的选择器，指定仅匹配菜单触发按钮
  不要用通用的a[href="#"]绑定菜单展开/收起逻辑，直接指定菜单的专属类名.toggle-menu匹配元素，完全避免和其他同href属性的元素冲突。
  如果之前是事件委托写法，修改示例如下：

  // 错误写法：匹配所有href="#"的a标签，会冲突
  document.body.addEventListener('click', function(e) {
    if(e.target.matches('a[href="#"]')) {
      // 原有菜单切换逻辑
    }
  })
  
  // 正确写法：只匹配菜单触发按钮
  document.body.addEventListener('click', function(e) {
    if(e.target.closest('.toggle-menu')) {
      // 原有菜单切换逻辑
      e.preventDefault(); // 顺便阻止默认跳转，避免点击菜单页面跳到顶部
    }
  })
  

• 方案2：替换菜单触发元素，从根源避免匹配冲突
  菜单触发按钮不需要跳转功能，完全可以不用a标签实现，直接替换为button元素，就不会和其他a标签的逻辑产生冲突：

  <!-- 修改后的菜单触发代码 -->
  <button class="toggle-menu" style="border:none;background:transparent;padding:0;cursor:pointer;">
    <i></i>
    <i></i>
    <i></i>
  </button>
  

  样式可以根据原有需求调整，事件绑定直接用.toggle-menu类选择器即可。
• 方案3：单独处理About页图片链接的事件冲突
  如果不想修改现有菜单逻辑，也可以单独给About页的图片a标签添加事件处理，阻止事件冒泡到菜单的绑定逻辑上，同时保留原有的鼠标跟随交互：

  document.querySelector('li.About a[href="#"]').addEventListener('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
  })
  

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