含span内部元素的按钮点击事件失效（仅点击边框有效）

问题原因 #

点击按钮内部的图标元素时，e.target指向的是图标（span/SVG）而非按钮本身，所以e.target.matches("#editButton")仅在点击按钮空白边框时返回true，导致内部图标点击无法触发预期逻辑。另外要注意：你给内部partial元素也设置了id="editButton"，这会造成页面ID重复，违反HTML规范，必须修改内部元素的ID（比如改成editIcon）。

解决方案 #

方案1：直接绑定按钮的点击事件

跳过全局事件监听，直接给按钮绑定click事件，利用事件冒泡特性，点击内部子元素也会触发按钮的点击回调：

document.getElementById('editButton').addEventListener('click', () => {
    console.log("button clicked");
});

方案2：用closest()方法优化全局事件委托

如果必须用全局document监听，改用closest()方法判断点击元素是否属于按钮或其子元素：

document.addEventListener("click", e => {
    const isEditButtonClicked = e.target.closest("#editButton") !== null;
    if (isEditButtonClicked) {
        console.log("button clicked");
    } else {
        console.log("click");
    }
});

closest("#editButton")会从当前点击元素向上遍历DOM树，找到最近的匹配#editButton的元素，只要点击区域属于按钮范围，就能正确识别。

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