含<i>标签的<button>异常：计算器按钮首次点击无响应

核心问题 #

你的平方按钮点击异常，本质是事件委托中e.target指向的是实际被点击的子元素：

• 平方按钮内部嵌套了<i>标签，首次点击时几乎都会点到这个<i>上，而<i>并没有instant-operator类，所以代码里的条件判断不成立，不会触发instantOperator函数。
• 根号按钮没有内部子元素，点击时e.target就是按钮本身，满足instant-operator的类判断，能正常触发。后续再点平方按钮时，若误点到按钮的空白区域（非<i>部分），e.target才会是按钮，功能才恢复正常。

解决方案 #

最稳妥的方式是在事件处理函数中，通过closest()方法找到点击元素所属的按钮，不管点击的是按钮本身还是内部子元素，都能正确定位到目标按钮：

修改后的JavaScript代码：

function instantOperator(iOperator) {
  console.log(iOperator);
}

const actionBtn = function (e) {
  // 找到最近的.btn元素，避免子元素干扰
  const clicked = e.target.closest('.btn');
  if (!clicked) return; // 点击区域不是按钮时直接返回

  clicked.classList.remove("btn--clicked");
  void clicked.offsetWidth; // trigger reflow
  clicked.classList.add("btn--clicked");

  if (clicked.classList.contains("integer")) {
    integer(clicked);
  } else if (clicked.classList.contains("operator")) {
    operator(clicked);
  } else if (clicked.classList.contains("instant-operator")) {
    instantOperator(clicked);
  }
};

btnsBody.addEventListener("click", actionBtn);

为什么移除<i>标签就正常？ #

移除<i>后，点击的直接是按钮本身，e.target就是带有instant-operator类的按钮元素，满足条件判断，所以能正常触发函数。

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