如何防止 HTML 表单中回车键意外触发删除操作

当页面中使用动态生成的删除按钮时，若未显式声明 type=”button”，其默认类型为 submit，导致在输入框内按 Enter 键也会触发表单提交或冒泡至父级事件监听器，从而误删整行——本文详解原因与可靠解决方案。

当页面中使用动态生成的删除按钮时，若未显式声明 `type=”button”`，其默认类型为 `submit`，导致在输入框内按 enter 键也会触发表单提交或冒泡至父级事件监听器，从而误删整行——本文详解原因与可靠解决方案。

在 Web 表单开发中，尤其涉及动态增删字段（如多组联系人、配置项等）时，一个常见却易被忽视的问题是：点击删除按钮可正常移除行，但用户在任意输入框中按 Enter 键，竟也触发了同一删除行为。这并非 JavaScript 逻辑错误，而是 html 表单的默认行为所致。

根本原因在于：
✅ 元素在未指定 type 属性时，默认值为 submit；
✅ 当该按钮位于

标签内（即使未显式绑定 submit 事件），浏览器会将 Enter 键视为“提交表单”操作；
✅ 若表单无显式 onsubmit 处理，事件可能向上冒泡，最终被委托监听器（如 $(“body”).on(“click”, “.remove_node_btn_frm_field”, …)）捕获，误判为点击删除按钮。

✅ 正确做法：显式声明按钮类型

将所有删除按钮的 HTML 改为：

<button type="button" class="remove_node_btn_frm_field">删除</button>

⚠️ 注意：仅添加 type=”button” 即可彻底隔离 Enter 键影响，无需修改 JavaScript 事件绑定逻辑。

? 验证与增强建议（可选）

虽然 type=”button” 已解决核心问题，但为提升健壮性，推荐补充以下实践：

立即学习“前端免费学习笔记（深入）”；

• 避免事件冒泡干扰（如按钮嵌套在可点击容器中）：

  $("body").on("click", ".remove_node_btn_frm_field", function (e) {   e.stopPropagation(); // 阻止事件向父元素冒泡   $(this).closest(".form_field_outer_row").remove(); });

• 禁用表单默认提交行为（若确需保留

  结构且含其他提交按钮）：

  $("form").on("submit", function (e) {   // 仅阻止非预期提交，保留真实提交逻辑   if (!$(e.target).find(":focus").is("[type='submit']")) {     e.preventDefault();   } });

? 总结

切记：这不是 jquery 或事件委托的缺陷，而是 HTML 规范的固有行为。养成在编写 时始终显式声明 type 的习惯（button / submit / reset），是规避此类“幽灵触发”的最简单、最可靠方式。