JavaScript中addEventListener绑定类元素点击事件不触发排查

navItems是通过document.getElementsByClassName("nvItem")获取的，这个API返回值是HTMLCollection 实时类数组集合，不是单个DOM元素，集合本身不存在addEventListener方法，直接调用会抛出类型错误，事件根本没有绑定成功，点击自然不会触发回调、也不会输出日志。

补充：你可以打开浏览器控制台看页面加载时的报错，会明确提示navItems.addEventListener is not a function，这就是事件不生效的直接原因。

二选一即可：

• 方法1：遍历集合，给每个导航项单独绑定事件
  把原来直接给navItems绑定事件的代码替换为遍历逻辑，逐个给匹配到的li元素绑定事件：

  for (let i = 0; i < navItems.length; i++) {
    navItems[i].addEventListener("click", () => {
      navigation.classList.toggle("nonActive");
      menu.classList.toggle("nonActive");
      console.log("---Deactive---");
    });
  }
  

  如果不需要兼容特别老旧的浏览器，也可以用更简洁的写法：

  Array.from(navItems).forEach(item => {
    item.addEventListener("click", () => {
      navigation.classList.toggle("nonActive");
      menu.classList.toggle("nonActive");
      console.log("---Deactive---");
    });
  })
  

• 方法2：事件委托（推荐）
  不需要给多个li逐个绑定事件，直接把点击事件绑在父元素ul（也就是navigation节点）上，利用事件冒泡机制处理子元素点击，性能更好，后续如果动态新增导航项也不需要重新绑定事件：

  navigation.addEventListener("click", (e) => {
    // 校验点击目标是否为导航项
    const clickedNavItem = e.target.closest(".nvItem");
    if (clickedNavItem) {
      navigation.classList.toggle("nonActive");
      menu.classList.toggle("nonActive");
      console.log("---Deactive---");
    }
  })
  

• 你代码里设置的CSS变量名存在拼写错误：--childenNumber正确拼写应为--childrenNumber，如果CSS中引用了这个变量，会因为拼写不匹配失效。
• 导航项内部是<a>锚点标签，点击默认会触发跳转，如果不需要默认跳转行为，可以在事件回调中加入e.preventDefault()阻止默认行为。

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