为何点击同一删除按钮时JS中e.target获取的元素不一致？

问题场景：用纯JS实现的待办清单中，每个任务的删除按钮点击行为异常，有时删单个任务，有时删掉整个任务容器。通过console.log(e.target)发现，点击删除按钮时，e.target有时是<i class="fa-solid fa-trash-can"></i>，有时是<button class="deleteTask"> <i ...></i> </button>，导致parentElement层级计算错误。

原因分析 #

这是事件冒泡+事件目标的特性导致的：

• 当点击按钮内部的图标<i>时，事件的target就是这个<i>元素（实际被点击的最内层元素）；
• 当点击按钮的空白区域（图标以外的按钮部分）时，target就是按钮<button>本身。
  由于两种情况的target层级不同，用固定次数的parentElement去定位要删除的元素，自然会出现结果不一致的问题。

解决方案 #

可以用以下几种方法解决：

1. 使用e.currentTarget替代e.target

currentTarget永远指向绑定了点击事件的元素（也就是删除按钮），不受点击位置影响：

deleteBtn.onclick = (e) => e.currentTarget.parentElement.remove()

2. 使用closest()方法精准定位任务项

不管点击的是按钮还是内部图标，都向上查找最近的任务项元素（假设单个任务容器类名为task-item）：

deleteBtn.onclick = (e) => e.target.closest('.task-item').remove()

3. 让图标不可触发点击事件

给图标添加CSS，让点击事件直接穿透到按钮：

.deleteTask i {
  pointer-events: none;
}

这样不管点击图标还是按钮，e.target都会是按钮元素，原代码的层级计算就能正常工作。

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