JavaScript中SVG path元素点击事件监听异常，如何检测元素或其子元素点击？

给包含多个SVG图标的父元素绑定点击事件后，期望点击带有name="setGameState"属性的SVG时执行操作，但实际点击时event.target有时会指向SVG内部的path元素，导致条件判断失效。

问题代码示例 #

const ele = document.getElementById("parent");
ele.addEventListener("click", (event) => {
  let target = event.target;
  console.log(target);
  if (target.getAttribute("name") == "setGameState") {
    //do other stuff
    console.log("svg with name setGameState clicked");
  }
});

<div id="parent">
  <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" name="setGameState" data-gamestate="true" class="topbar-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM10.622 8.415l4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332z"></path></g>
  </svg>
  <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" name="setGameState" data-gamestate="false" class="topbar-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM10.622 8.415l4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332z"></path></g></svg>
</div>

解决方案 #

方法1：使用closest()向上查找目标SVG

利用Element.closest()方法，从点击的元素出发，向上查找最近的<svg>元素，再判断它的name属性：

const ele = document.getElementById("parent");
ele.addEventListener("click", (event) => {
  // 找到点击元素所在的最近svg节点
  const targetSvg = event.target.closest('svg');
  // 先判断svg存在，再检查name属性
  if (targetSvg && targetSvg.getAttribute("name") === "setGameState") {
    console.log("svg with name setGameState clicked");
    // 还能获取svg上的其他属性，比如data-gamestate
    const gameState = targetSvg.getAttribute('data-gamestate');
    console.log('当前游戏状态:', gameState);
  }
});

优势：无需修改样式，兼容性好（支持ES6+的浏览器都能用），能精准定位到目标SVG。

方法2：禁用SVG内部元素的点击事件

通过CSS让SVG内部的所有子元素不响应点击事件，点击时事件直接触发在SVG本身：

.topbar-icon * {
  pointer-events: none;
}

这样修改后，原来的JS代码不需要改动，event.target会直接指向SVG元素。
优势：代码改动最小，逻辑简单，适合所有内部元素都不需要单独响应点击的场景。

内容的提问来源于stack exchange，提问作者Muhammad Saquib Shaikh