内嵌SVG图标的按钮点击SVG区域时onclick事件失效原因及解决

• 并非SVG本身阻挡了按钮的onclick事件触发：点击SVG区域时，按钮绑定的myFunction()实际已经正常执行，交互异常来自于全局点击事件的目标判断逻辑错误
• DOM事件机制中，event.target始终指向用户实际点击的最底层DOM节点，不会随事件冒泡改变。点击按钮空白区域时，target就是.dropbtn本身；点击内嵌的SVG、SVG内部的path路径元素时，target会变成<svg>或<path>节点，不再是.dropbtn
• 原代码中window.onclick的执行逻辑是：当event.target不匹配.dropbtn选择器时，遍历所有下拉菜单，移除控制显示的show类。结合事件冒泡顺序，整个交互的执行流是：
  1. 用户点击SVG区域，事件沿DOM树向上冒泡
  2. 冒泡到<button>节点时，触发绑定的myFunction()，给下拉菜单加上show类，准备展开
  3. 事件继续冒泡到window层，执行全局点击逻辑——此时因为target不是.dropbtn，立刻触发判断分支，把刚加上的show类移除
  4. 最终表现为下拉菜单完全没有展开，和“点击SVG区域事件失效”的观感一致

方案1：为装饰性SVG关闭指针事件（优先推荐） #

按钮内嵌的SVG通常仅作视觉展示，不需要独立响应任何鼠标交互，直接关闭SVG及其内部所有子元素的指针事件，让点击行为穿透到下层的按钮元素上，从根源上避免target被识别为SVG节点。
在CSS中新增以下规则即可：

.dropbtn svg, .dropbtn svg * {
  pointer-events: none;
}

添加规则后，无论点击按钮内的哪个SVG区域，浏览器都会把点击事件的target识别为.dropbtn元素，全局判断逻辑就不会误触发关菜单操作。

方案2：修正全局点击事件的判断逻辑 #

如果后续需要给SVG元素增加独立的鼠标交互（比如悬浮提示、点击反馈），可以修改窗口点击事件的判断规则，不再仅判断target本身是否为按钮，而是向上追溯判断点击位置是否落在按钮范围内：
将原JS中window的点击逻辑调整为：

window.onclick = function(event) {
  // 从点击目标开始向上追溯，只要找到匹配.dropbtn的元素，就判定为点击了按钮区域
  if (!event.target.closest('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

该方法兼容所有现代浏览器，哪怕按钮后续嵌入其他类型的子元素（文字、图标、第三方组件），都不需要反复调整选择器规则。

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