SVG事件委托异常：ID绑定失效，类名绑定正常的问题排查

核心原因 #

点击SVG图标时，实际触发事件的目标元素（e.target）大概率是内部的<path>标签，而非外层的<svg>标签：

• <path>没有设置id="burger"，所以e.target.id.includes('burger')自然无法匹配。
• 你用类名判断能生效，只是因为偶尔点击到了<svg>的空白区域（未被<path>覆盖的部分），此时e.target是<svg>本身，classList.contains('menubtn')才会命中；如果点击的是<path>，类名判断其实也会失效，只是你没注意到这个场景。

修复方案 #

使用Element.closest()方法，从点击的元素向上查找最近的匹配元素，不管点击的是SVG本身还是内部子元素，都能正确命中目标：

修改后的JS代码：

$('mstrwrap').addEventListener('click', function(e) {
  // 处理A标签逻辑
  if (e.target.nodeName === 'A') {
    // ... 你的A标签处理代码
  }
  
  // 用closest匹配类名（更健壮的写法）
  else if (e.target.closest('.menubtn')) {
    opennavbar();
  }

  // 用closest匹配ID（修复原失效问题）
  else if (e.target.closest('#burger')) {
    opennavbar();
  }
});

额外说明 #

如果只需要通过ID触发，甚至可以去掉类名判断，直接保留e.target.closest('#burger')的逻辑即可，这样代码更简洁，同时覆盖所有点击SVG的场景。

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