在点击事件的监听器中，当使用e.target.name时，具有相同name属性的子元素会显示为undefined

前端开发 2026-07-10

当我点击按钮时能得到正确的结果，但当我直接点击图标时却得到undefined。有人能解释这是为什么吗？我应该使用除了name之外的其他属性来定位按钮和图标吗？

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;
  },
}

<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>

解决方案

name 属性不是全局属性，不能应用于所有元素。

相反，可以考虑使用 data-* 属性。例如：

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

scissorsEl.addEventListener("click", (e) => {
  state.setUserChoice(e.target.dataset.name); // <-- grab from the "dataset" property
  console.log("label:", e.target.dataset.name); // <-- and here
});

const state = {
  userChoice: "",

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

<script src="https://kit.fontawesome.com/03a64a1742.js" crossorigin="anonymous"></script>
<button class="icon icon-scissors" data-name="scissors">
    <i class="fa-solid fa-hand-scissors" data-name="scissors"></i>
</button>

data-* 属性背后的理念是为元素存储任何相关信息，这些信息不一定符合该元素现有的标准属性。

JavaScript