JavaScript添加点击事件监听器后，event.target返回嵌套元素无法获取目标id

问题根因 #

event.target 是浏览器原生属性，作用是返回用户实际点击到的DOM树最深层节点——这就是为什么你点击 .check-item 内部嵌套的子元素时，拿到的是 .check-item-top、<span> 这类子节点，而不是外层的 .check-item。
你尝试的 event.stopPropagation() 作用是阻止事件向上冒泡到父级节点，和“获取绑定监听的元素”的需求完全无关，所以没有效果。

修复方案 #

事件对象内置了 event.currentTarget 属性，这个属性永远指向当前绑定了事件监听器的DOM节点，也就是你通过 addEventListener 挂载 changeItemSize 函数的那个 .check-item 元素。
直接修改原有取id逻辑即可：

function changeItemSize(event) {
    // 用 currentTarget 替代原代码中的 target
    const itemId = event.currentTarget.getAttribute("id");
    console.log("绑定监听器的元素:", event.currentTarget);
    console.log("对应元素id:", itemId);
}

另外注意你原代码中 changeItemSize 函数末尾多写了一个闭合大括号，会触发JS语法报错，写完可以通过浏览器控制台的报错提示检查代码问题。

补充可选实现 #

如果你是把监听器统一挂在父容器上、而非循环给每个 .check-item 单独绑定的场景，可以用 closest 方法从点击触发点向上遍历找到匹配的 .check-item 元素：

function changeItemSize(event) {
    // 从实际点击的元素向上找最近的 .check-item 节点
    const itemNode = event.target.closest(".check-item");
    if (!itemNode) return;
    const itemId = itemNode.getAttribute("id");
}

两个核心事件属性的区别 #

• event.target：用户实际点击到的最深层元素
• event.currentTarget：当前正在执行事件处理函数的、绑定了监听器的元素

注意：事件处理函数执行结束后，event.currentTarget 会被浏览器置为 null，如果需要在异步回调（比如定时器、接口请求）中使用这个值，一定要先把它存到独立变量里。

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