当HTML中未显式指定type属性时，默认为type="submit"，若其位于内，点击会触发表单提交，导致多个按钮事件意外联动。本文详解两种可靠解决方案：设置type="button"或调用event.preventDefault()。
当html中未显式指定`type`属性时，`
在Web开发中，一个常见却容易被忽视的问题是：未声明 type 属性的 元素在表单内会默认以 type="submit" 行为执行。这意味着，即使你只为“Add”按钮绑定了点击逻辑，只要它嵌套在 中（无论是否显式写出 标签，浏览器可能基于上下文自动关联），点击该按钮就会触发表单提交——进而可能意外激活其他 type="submit" 按钮（如“Cancel”或“Update”）的提交流程，甚至导致页面刷新、数据丢失或事件重复执行。
✅ 正确做法一：显式声明 type="button"
最直观、语义清晰的修复方式是为非提交用途的按钮明确添加 type="button"：
<div class="form-group">
<div>
<select id="available-options" multiple><option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option></select><!-- 关键修改：添加 type="button" --><button id="add-button" type="button" aria-label="Add">Add</button>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-info pull-right">Update</button>
</div>
此时，#add-button 完全脱离表单提交流，仅响应 JavaScript 绑定的 click 事件，不会干扰其他按钮逻辑。
✅ 正确做法二：使用 event.preventDefault() 阻止默认行为
若因历史原因无法修改 HTML，可在事件处理器中主动阻止默认提交行为：
window.onload = function () {
const addButton = document.getElementById("add-button");
addButton.addEventListener("click", function (event) {
event.preventDefault(); // ✅ 关键：阻止表单默认提交
const availableOptions = document.getElementById("available-options");
const selectedOptions = document.getElementById("selected-options"); // 假设目标容器存在
// 安全遍历选中项（推荐使用 for...of 或 Array.from）
for (const option of availableOptions.selectedOptions) {
selectedOptions.appendChild(option);
}
});
};
⚠️ 注意事项：
event.preventDefault()必须在事件处理函数内调用，且不能用于已冒泡完成的事件；- 确保
availableOptions和selectedOptions元素在脚本执行时已存在（如使用document.getElementById并确认 DOM 加载完成）；- 若使用箭头函数，
this指向不变，但event参数必须显式声明（如(event) => { ... }）。
? 补充说明：为什么原代码会“两个按钮都触发”？
根本原因并非事件监听器被重复绑定，而是浏览器将 #add-button 视为表单提交控件——点击即提交整个表单，从而触发 的 submit 事件（若已监听），并使所有 type="submit" 按钮参与表单提交流程（例如焦点、可访问性行为或后端接收逻辑）。这与 JavaScript 事件冒泡无关，而是 HTML 表单的原生语义行为。
✅ 最佳实践建议
- 所有非提交功能的按钮，一律显式写
type="button"（语义明确、无需依赖 JS、利于可访问性）； - 提交类按钮保持
type="submit"，并统一在上监听submit事件进行表单验证与提交控制； - 避免在表单内使用无
type的，这是 WCAG 可访问性与 HTML5 规范的双重推荐。
通过以上任一方式，即可彻底解决“点击 Add 却触发 Cancel/Update 提交”的问题，确保交互逻辑精准可控。
