JavaScript菜单开发问题：querySelectorAll绑定点击事件失效求助

你的代码存在几个核心问题，对应修复方案如下：

1. NodeList无法直接绑定事件 #

document.querySelectorAll('.menu-trigger')返回的是DOM元素集合（NodeList），不是单个元素，不能直接调用addEventListener，必须遍历集合内的每个元素分别绑定点击事件。

2. 事件冒泡导致逻辑冲突 #

点击.menu-trigger时，事件会向上冒泡到<html>元素，触发其点击事件，导致子菜单刚显示就被隐藏，需要在触发元素的点击事件里阻止冒泡。

3. 目标元素判断逻辑错误 #

<html>的点击事件中，event.target !== USERINFO的判断不成立——USERINFO是元素集合，不是单个元素，应该用closest()方法检查点击目标是否属于.menu-trigger或其子元素。

修复后的完整代码 #

JavaScript代码 #

const menuTriggers = document.querySelectorAll('.menu-trigger');
const subMenu = document.getElementById("login-subMenu");
const html = document.documentElement;

// 遍历所有触发元素绑定点击事件
menuTriggers.forEach(trigger => {
  trigger.addEventListener("click", function(e) {
    // 阻止事件冒泡，避免触发html的点击事件
    e.stopPropagation();
    subMenu.style.right = "0";
    document.body.style.overflow = 'hidden';
  });
});

html.addEventListener("click", function(event) {
  // 检查点击目标是否不属于触发元素及其子元素
  const isTrigger = event.target.closest('.menu-trigger');
  if (!isTrigger) {
    subMenu.style.right = "-570px";
    document.body.style.overflow = 'auto';
  }
});

HTML代码（补充优化点） #

<div>
  <!-- 阻止a标签默认跳转行为 -->
  <a id="USERINFO" class="menu-trigger" href="javascript:void(0)">ABC</a>
  <div id="bgrdt" class="menu-trigger">
    <a href="javascript:void(0)">XYZ</a>
  </div>
  <!-- 补充子菜单示例（需配合你的CSS定位） -->
  <div id="login-subMenu" style="position: fixed; right: -570px; top: 0; width: 570px; height: 100vh; background: #fff;">
    子菜单内容
  </div>
</div>

额外优化说明 #

• closest('.menu-trigger')可以准确判断点击目标是否属于触发元素或其子元素，避免因点击触发元素内部节点（比如第二个触发块里的a标签）导致逻辑失效。
• 给a标签添加href="javascript:void(0)"，阻止默认跳转行为，避免页面刷新或跳转。
• 把子菜单显示/隐藏逻辑与body的overflow控制对应，保证交互一致性。

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