Firefox中e.path未定义：代码在Chrome正常，Firefox报错TypeError

我帮你搞定这个浏览器兼容性问题！你遇到的TypeError: e.path is undefined是因为e.path是Chrome等WebKit/Blink内核浏览器的非标准属性，Firefox并不支持它。不过别担心，我们可以用标准DOM API来替代它——那就是Event.composedPath()方法，这个方法是所有现代浏览器都支持的标准方法，能返回事件传播的完整路径数组，和e.path的作用完全一致。

先看看你原来的代码：

document.addEventListener("click", function(e){
  if (e.path[2].id == 'v-pills-rest-tab') {
    if (e.path[2].getAttribute("aria-selected") == "true") {
      document.getElementById('rect').style.fill = '#F15A29';
      document.getElementById('v-pills-profile-tab').style.color = '#F15A29';
    }
  } else {
    if (document.getElementById('v-pills-rest-tab').getAttribute("aria-selected") == "false") {
      document.getElementById('rect').style.fill = '#C4C4C4';
      document.getElementById('v-pills-profile-tab').style.color = '#414042';
    }
  }
  if (document.getElementById("pills-profile-tab").getAttribute("aria-selected") != "true" && document.getElementById("pills-contact-tab").getAttribute("aria-selected") != "true" ) {
    document.getElementById("mob-num-wrapper").style.display = 'none';
  }
});

只需要把所有的e.path替换成e.composedPath()，再增加一点健壮性判断，就能解决Firefox的报错问题了。修改后的代码如下：

document.addEventListener("click", function(e){
  // 获取事件路径，兼容所有现代浏览器
  const eventPath = e.composedPath();
  // 先检查数组长度，避免点击元素时路径数组不足导致的越界错误
  if (eventPath.length >= 3 && eventPath[2].id == 'v-pills-rest-tab') {
    if (eventPath[2].getAttribute("aria-selected") == "true") {
      document.getElementById('rect').style.fill = '#F15A29';
      document.getElementById('v-pills-profile-tab').style.color = '#F15A29';
    }
  } else {
    if (document.getElementById('v-pills-rest-tab').getAttribute("aria-selected") == "false") {
      document.getElementById('rect').style.fill = '#C4C4C4';
      document.getElementById('v-pills-profile-tab').style.color = '#414042';
    }
  }
  if (document.getElementById("pills-profile-tab").getAttribute("aria-selected") != "true" && document.getElementById("pills-contact-tab").getAttribute("aria-selected") != "true" ) {
    document.getElementById("mob-num-wrapper").style.display = 'none';
  }
});

简单说明下修改点：

• e.composedPath()会返回一个数组，包含事件从触发元素到最顶层document的所有节点，和e.path的结构完全一致
• 增加eventPath.length >=3的判断，是为了防止点击某些层级较浅的元素时，路径数组长度不足3导致的Cannot read properties of undefined (reading 'id')错误，让代码更稳定

这样修改后，你的代码就能在Chrome和Firefox里都正常运行啦！

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