点击按钮子图标时e.target.name返回undefined的原因及属性选择咨询

问题描述 #

我给带有name属性的按钮绑定了click事件监听器，按钮内部包含一个设置了同名name属性的图标元素。点击按钮本身时能正确获取e.target.name的值，但点击图标时却返回undefined。想请教该问题的原因，以及是否需要更换其他属性来定位按钮和图标？

代码示例 #

JavaScript部分

const scissorsEl = document.querySelector(".icon-scissors");

scissorsEl.addEventListener("click", (e) => {
  state.setUserChoice(e.target.name);
  console.log("label:", e.target.name);
});

const state = {
  userChoice: "",

  setUserChoice(choice) {
    this.userChoice = choice;
  },
}

HTML部分

<script src="https://kit.fontawesome.com/03a64a1742.js" crossorigin="anonymous"></script>

<button class="icon icon-scissors" name="scissors">
  <i class="fa-solid fa-hand-scissors" name="scissors"></i>
</button>

原因分析 #

• e.target代表实际触发点击事件的元素：点击按钮空白区域时，触发元素是<button>，它属于HTML规范支持name属性的表单相关元素，所以能正常读取.name；点击图标时，触发元素是<i>标签，而<i>并非HTML规范中支持name属性的元素，即便手动添加了name属性，浏览器也不会将其作为标准属性识别，因此通过.name读取会返回undefined。
• 你给<i>标签添加的name属性属于无效的自定义属性，无法通过标准DOM属性访问方式获取。

解决方案 #

1. 改用e.currentTarget获取绑定事件的元素 #

e.currentTarget始终指向绑定事件监听器的元素（也就是你选中的.icon-scissors按钮），无论点击的是按钮内部哪个子元素，它都会稳定指向按钮本身，这样就能直接拿到按钮的name属性：

scissorsEl.addEventListener("click", (e) => {
  state.setUserChoice(e.currentTarget.name);
  console.log("label:", e.currentTarget.name);
});

2. 规范使用自定义属性（若需给图标加标识） #

如果需要给图标添加自定义标识，不要用name，而是使用HTML标准的data-*自定义属性，比如：

<button class="icon icon-scissors" name="scissors">
  <i class="fa-solid fa-hand-scissors" data-choice="scissors"></i>
</button>

需要读取时可以通过e.target.dataset.choice获取，但针对当前场景，第一种方法更直接高效。

总结 #

不需要更换按钮的name属性，只需将e.target替换为e.currentTarget即可解决问题；若需给非表单元素添加自定义标识，推荐使用data-*属性符合HTML规范。

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