"点击事件在JavaScript中会触发不同的按钮控件上"

Question

我有以下HTML代码，在其中我可以将商品添加到购物车，最后点击提交按钮。

我有以下JavaScript代码：

window.onload = function () {
    const addButton = document.getElementById("add-button");

    addButton.addEventListener("click", () => {
        const selectedOptionsList = availableOptions.selectedOptions;
        for (let i = 0; i < selectedOptionsList.length; i++) {
            const option = selectedOptionsList[i];
            // 这里可能需要调整，因为直接将已选中的option移动到selectedOptions会导致重复
            // 若要复制选项，可以使用.cloneNode(true)方法，但根据您的需求可能需要不同的操作
            // selectedOptions.appendChild(option.cloneNode(true));
        }
    });
}

当我点击添加按钮时，两个按钮的事件都会被触发！

Your Common Sense · Answer

默认情况下，button元素的type属性为“submit”，这会导致表单提交。您可以为button元素指定type="button"，或者使用event.preventDefault()阻止其默认行为。

示例：

Haim Evgi · Answer

尝试在事件处理器内部使用event.stopPropagation()。

这个问题可能是因为JavaScript处理事件的方式导致的。默认情况下，JavaScript遵循事件冒泡机制。因此，在目标事件执行完毕后，它还会触发其下一个父级级别的事件处理器，或者说，事件会向上冒泡到父元素，直到最终到达DOM树的顶层。为了防止这种情况发生，我们必须在处理器方法中明确指定event.stopPropagation()。

我认为上述回答将对您有所帮助。同时，我还提供了一个关于该主题的参考链接，请参阅这个参考链接。