多HTML页面共用JS文件时Home按钮失效的原因咨询

安全阿岳

2026-6-17

问题原因与解决方案

核心原因

当about_me.html加载共用的index.js时，代码会按顺序执行所有事件绑定逻辑：

首先执行document.querySelector("#about")，但about_me.html里没有这个元素，返回null
紧接着调用null.addEventListener()会直接抛出TypeError错误，浏览器会终止后续代码执行——这就导致绑定#home按钮的逻辑根本没机会运行

而直接嵌入JS或拆分文件时，不会去查找当前页面不存在的元素，自然不会报错中断，所以功能正常。

解决方案1：检查元素存在后再绑定事件

修改index.js，每次获取元素后先判断是否存在，再添加监听：

// 处理About me按钮
const aboutBtn = document.querySelector("#about");
if (aboutBtn) {
  aboutBtn.addEventListener("click", function() {
    window.location.href = "about_me.html";
  });
}

// 处理Contact me按钮
const contactBtn = document.querySelector("#contact");
if (contactBtn) {
  contactBtn.addEventListener("click", function() {
    window.location.href = "contact_me.html";
  });
}

// 处理Home按钮
const homeBtn = document.querySelector("#home");
if (homeBtn) {
  homeBtn.addEventListener("click", function() {
    window.location.href = "home.html";
  });
}

解决方案2：事件委托（通用优雅方案）

利用事件冒泡，在父元素上统一监听点击事件，通过目标元素ID判断跳转逻辑，无需逐个查找按钮：

document.body.addEventListener("click", function(e) {
  switch(e.target.id) {
    case "about":
      window.location.href = "about_me.html";
      break;
    case "contact":
      window.location.href = "contact_me.html";
      break;
    case "home":
      window.location.href = "home.html";
      break;
  }
});