计算器开发中event.target返回对象不一致问题求助

你遇到的问题本质是事件冒泡机制导致的：点击按钮内部的<i>图标时，event.target会指向这个<i>元素，而非外层的按钮；只有直接点击按钮空白区域时，target才会指向按钮本身。之前用offsetParent不可靠，是因为元素的偏移父级可能随布局变化。

下面是两种稳定获取按钮元素的方案：

方案1：使用event.currentTarget #

currentTarget始终指向绑定事件监听器的元素（也就是你循环中的calcButtons[i]），和实际点击的子元素无关，是最直接可靠的方式：

const calcButtons = document.getElementsByClassName("calcButton");
for (let i = 0; i < calcButtons.length; i++) {
    calcButtons[i].addEventListener('click', (event) => {
        const button = event.currentTarget;
        // 直接访问按钮的data属性
        console.log(button.dataset.type);
        console.log(button.dataset.value);
    });
}

方案2：使用closest()方法查找父级按钮 #

如果需要从点击的元素向上追溯到最近的按钮（比如后续有动态添加元素的场景），可以用closest()方法精准匹配.calcButton类的元素：

const calcButtons = document.getElementsByClassName("calcButton");
for (let i = 0; i < calcButtons.length; i++) {
    calcButtons[i].addEventListener('click', (event) => {
        // 从点击元素向上找最近的.calcButton元素
        const button = event.target.closest('.calcButton');
        if (button) { // 确保找到目标元素
            console.log(button.dataset);
        }
    });
}

这两种方案都能稳定获取到按钮的data-*属性，推荐优先用方案1，逻辑更直接。

内容的提问来源于stack exchange，提问作者brian-welch