Firefox无法跳转导航链接问题（附复现地址与JS代码）

这个问题的核心是Firefox与其他浏览器对mouseout事件的触发逻辑差异，导致点击链接时导航栏提前收起，打断了点击事件的执行。

问题根源 #

你给main-nav绑定了mouseout事件，这个事件的特性是：当鼠标离开元素本身，或者离开它的任意子元素时都会触发。在Firefox中，当你将鼠标移到子链接（比如"firefox"链接）上时，浏览器会判定为触发了nav的mouseout事件，导致导航栏立刻收起，此时链接的点击事件还没来得及执行就被打断了。而其他浏览器对这个事件的判定更宽松，不会在鼠标移到子元素时触发父元素的mouseout。

解决方案 #

把mouseout事件替换为mouseleave事件——这个事件只会在鼠标真正离开整个父元素容器时才会触发，移到子元素上不会触发。同时还能修复代码里的一个小错误（事件对象误用），具体修改如下：

修改后的JavaScript代码

var btn = document.getElementById("main-btn"); 
btn.addEventListener("mouseover", function (e) { 
  var nav = document.getElementById("main-nav"); 
  var sub_btns = document.getElementsByClassName("sub-btn"); 
  var pos = []; 
  // 修正：之前错误地给事件对象e加类，应该给btn元素添加类名
  btn.className += " main-hover"; 
  console.log(e) 
  nav.addEventListener("mouseover", function (e) { 
    var total =0; 
    for(var x = 0;x<sub_btns.length;x++) { 
      if(x <2) { 
        sub_btns[x].style.left = "-"+((x+1)*30)+"%"; 
        pos[x] = ((x+1)*20); 
      } else { 
        sub_btns[x].style.right = "-"+((x-1)*30)+"%"; 
        pos[x] = ((x-1)*280); 
      } 
      sub_btns[x].style.opacity = "1"; 
    } 
    nav.style.width = 50+"%"; 
  }); 
  // 关键修改：将mouseout替换为mouseleave
  nav.addEventListener("mouseleave", function(){ 
    nav.style.width = "100px"; 
    for(var x = 0;x<sub_btns.length;x++) { 
      sub_btns[x].style.left = "0"; 
      sub_btns[x].style.right = "0"; 
      sub_btns[x].style.opacity = "0"; 
    } 
  }) 
});

额外优化提示 #

1. 给元素添加类名时，建议用classList.add("main-hover")代替直接拼接字符串，避免重复添加类名的问题：

   btn.classList.add("main-hover");
   

2. 可以考虑将nav的mouseover事件改为mouseenter，保持事件逻辑的一致性，不过这对当前问题影响不大。

验证效果 #

修改后在Firefox中测试，将鼠标悬停在NAV上展开导航，点击"firefox"链接就能正常跳转了——因为mouseleave只会在你把鼠标移出整个导航容器时才会收起导航，不会干扰子元素的点击操作。

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