当HTML中未显式设置type属性时，默认为submit类型，若位于内，点击会触发表单提交，导致多个按钮事件意外联动。解决方法是显式声明type="button"或在事件处理中调用event.preventDefault()。
当html中未显式设置`type`属性时，`
在Web开发中，一个常见却容易被忽视的问题是：看似独立的按钮点击事件，实际却触发了整个表单的提交行为。根本原因在于 HTML 规范规定 —— <button></button> 元素的默认 type 值为 "submit"（而非 "button"）。因此，只要该按钮处于 <form></form> 标签内部（即使未显式写出 <form></form>，某些框架或上下文可能隐式包裹），点击它就会尝试提交表单，进而可能激活其他 type="submit" 按钮的默认行为（如页面刷新、跳转或重复执行逻辑）。
在你的代码中，#add-button 虽然语义上是“添加选项”，但因缺少 type="button"，浏览器将其视为提交按钮；而底部的“Cancel”和“Update”也均为 type="submit"，这导致点击“Add”时，不仅执行了添加逻辑，还意外触发表单提交，造成事件“连带触发”的假象。
✅ 正确做法有两种，推荐根据场景选择：
方案一：显式声明按钮类型（推荐用于语义清晰的非提交操作）
将添加按钮改为：
<button id="add-button" type="button" aria-label="Add">Add</button>
这样无需 JavaScript 干预，从根本上避免提交行为。
方案二：阻止默认事件（适用于需动态控制或兼容旧结构）
在事件监听器中调用 event.preventDefault()：
addButton.addEventListener("click", (event) => {
event.preventDefault(); // 关键：阻断表单提交默认行为
const selected = document.getElementById("available-options").selectedOptions;
const targetList = document.getElementById("selectedOptions"); // 注意：原代码中 missing 'selectedOptions' 元素定义
for (let i = 0; i < selected.length; i++) {
targetList.appendChild(selected[i]);
}
});⚠️ 注意事项：
- 确保目标容器（如
#selectedOptions）在 DOM 中真实存在，否则appendChild()会抛出错误； - 若使用
selectedOptions集合进行移动，注意其为实时集合（Live Collection），循环时长度可能动态变化，建议先转为数组：Array.from(selected)； - 不要遗漏
window.onload或更现代的DOMContentLoaded事件，确保 DOM 加载完成后再绑定事件； - 在真实表单中，“Cancel”按钮应使用
type="button"或配合formnovalidate+onclick="history.back()"实现导航回退，而非type="submit"，避免误提交。
总结：按钮行为由 type 属性决定，而非 class 或文本内容。养成始终显式声明 type 的习惯（button / submit / reset），是避免此类隐蔽 Bug 的最佳实践。
