触发点击事件时如何获取绑定了监听器的父元素而非子元素？

你遇到的差异是事件对象两个属性的区别导致的：

• e.target：触发事件的最内层DOM元素，点击按钮内部的<i>标签时就会返回<i>
• e.currentTarget：事件监听器绑定的宿主元素，无论点击内部哪个子元素，都会返回绑定了onClick的<button>元素

直接把代码里的e.target替换为e.currentTarget即可：

const onCrossClick = (e) => {
  console.log(e.currentTarget);
};

备选方案（无需修改JS逻辑） #

给按钮内部所有子元素添加pointer-events: noneCSS属性，让子元素不响应任何鼠标交互事件，这样点击时触发事件的元素直接为按钮本身：

.delete-button * {
  pointer-events: none;
}

注意事项 #

如果事件回调内存在异步操作，e.currentTarget会在同步回调执行完成后被重置为null，需要提前将值存储到变量中再在异步逻辑里调用：

const onCrossClick = (e) => {
  const targetBtn = e.currentTarget;
  setTimeout(() => {
    console.log(targetBtn);
  }, 500);
};

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