JavaScript中点击Add按钮触发多个按钮事件的问题求助

问题原因 #

HTML里的<button>元素如果没明确指定type属性，在表单环境下默认type为submit。你的Add按钮未设置type，点击时会自动触发表单提交，进而引发页面上两个submit按钮关联的提交逻辑（本质是表单整体提交的连锁反应）。

解决方案 #

有两种简单的修复方式：

方法1：给Add按钮指定type="button"

直接修改HTML中的Add按钮，明确它是普通按钮而非提交按钮：

<button id="add-button" type="button" aria-label="Add">Add</button>

方法2：在JavaScript事件中阻止默认行为

如果不想修改HTML，也可以在Add按钮的点击事件里阻止表单提交的默认行为：

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

    addButton.addEventListener("click", (event) => {
        // 阻止默认的表单提交动作
        event.preventDefault();
        
        const selected = availableOptions.selectedOptions;
        for (let i = 0; i < selected.length; i++) {
            const option = selected[i];
            selectedOptions.appendChild(option);
        }
    });
}

两种方法都能解决问题，推荐第一种，逻辑更直观清晰。

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