点击含SVG/Path的Button时获取指定属性的问题求助

核心思路 #

放弃依赖e.target的层级关系获取元素，转而从绑定事件的button元素（或通过DOM查找定位到的button）内部直接获取目标path元素，这样无论点击button内的哪个区域（button本身、svg、path），都能稳定拿到path的pathNumber属性。

具体实现方法 #

方法1：使用e.currentTarget（推荐） #

currentTarget始终指向绑定事件处理函数的元素（也就是你的button），不受实际点击的子元素影响：

<button class="like-btn">
  <svg viewBox="0 0 24 24">
    <path pathNumber="1" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path>
  </svg>
</button>

document.querySelector('.like-btn').addEventListener('click', function(e) {
  // 从绑定事件的button里查找path元素
  const pathEl = e.currentTarget.querySelector('path');
  // 获取pathNumber属性
  const pathNumber = pathEl.getAttribute('pathNumber');
  console.log(pathNumber); // 输出对应的属性值
});

方法2：利用this指向 #

在事件处理函数中，this默认指向绑定事件的button元素，效果和currentTarget一致：

document.querySelector('.like-btn').addEventListener('click', function() {
  const pathEl = this.querySelector('path');
  const pathNumber = pathEl.getAttribute('pathNumber');
  console.log(pathNumber);
});

方法3：事件委托（多按钮场景） #

如果页面有多个点赞按钮，用事件委托可以避免给每个按钮单独绑定事件：

// 绑定到父容器（比如body，或者按钮的直接父元素）
document.body.addEventListener('click', function(e) {
  // 找到点击元素所属的like-btn按钮
  const targetBtn = e.target.closest('.like-btn');
  if (targetBtn) {
    const pathEl = targetBtn.querySelector('path');
    const pathNumber = pathEl.getAttribute('pathNumber');
    console.log(pathNumber);
  }
});

为什么这些方法能解决问题 #

之前的错误在于依赖e.target的children层级（比如e.target.children[0].children[0]），但e.target是实际点击的元素（可能是button、svg或path），不同元素的层级结构不同，导致获取元素时出错。而上面的方法都是直接从button元素内部查找path，不管点击的是哪个子元素，都能稳定定位到目标元素。

内容的提问来源于stack exchange，提问作者Kaso A. Thourcans