当页面中动态生成的表单行包含默认 type 的按钮时，按 Enter 键会意外触发删除操作——这是因为 默认 type 为 submit，在表单上下文中会响应回车事件；解决方法是显式声明 type="button"。

当页面中动态生成的表单行包含默认 type 的按钮时，按 enter 键会意外触发删除操作——这是因为 `` 默认 type 为 `submit`，在表单上下文中会响应回车事件；解决方法是显式声明 `type="button"`。

在 Web 表单开发中，尤其是涉及动态增删字段（如多组输入框、自定义表单项）的场景下，一个常见却容易被忽视的问题是：点击“删除”按钮可正常移除对应行，但用户在任意输入框内按下 Enter 键时，也会意外触发该删除逻辑。这并非 JavaScript 事件监听本身有误，而是 HTML 按钮元素的默认行为所致。

根本原因： 的隐式 type="submit"

根据 HTML 规范，未显式指定 type 属性的 元素，在表单（

）内部默认具有 type="submit" 行为。这意味着：

• 点击按钮会提交表单；
• 在表单内任意可编辑控件（如 、）中按 Enter 键，浏览器也会自动触发表单提交——进而激活最近的 submit 类型按钮的点击事件（即使焦点不在按钮上）。

由于你的事件委托绑定在 body 上，并监听所有 .remove_node_btn_frm_field 按钮的 click 事件，而该按钮恰好位于表单内，Enter 键引发的“模拟点击”会被捕获，最终执行 $(this).closest(".form_field_outer_row").remove()，导致误删。

正确解决方案：显式设置 type="button"

只需确保所有用于 UI 交互（非表单提交）的按钮都明确声明 type="button"：

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

<!-- ✅ 正确：禁用表单提交行为 -->
<button type="button" class="remove_node_btn_frm_field">删除</button>

<!-- ❌ 错误：默认 type="submit"，易引发 Enter 误触发 -->
<button class="remove_node_btn_frm_field">删除</button>

即使按钮位于

内部，type="button" 也能彻底隔离其与表单提交机制的关联，使 Enter 键仅影响当前输入框（如触发换行或表单提交），而不再“穿透”到删除按钮的 click 事件。

补充建议与最佳实践

• 验证 DOM 结构：确保动态生成的按钮 HTML 字符串中始终包含 type="button"，例如在 JS 拼接模板时：

  const newRow = `
    <div class="form_field_outer_row">
      <input type="text" name="field[]">
      <button type="button" class="remove_node_btn_frm_field">删除</button>
    </div>
  `;

• 防御性增强（可选）：若无法完全控制按钮渲染逻辑，可在事件处理中添加表单提交拦截：

  $("body").on("click", ".remove_node_btn_frm_field", function (e) {
    // 阻止事件冒泡至 form submit（次要防护）
    e.stopPropagation();
    $(this).closest(".form_field_outer_row").remove();
  });

  ⚠️ 注意：此方式治标不治本，仍需优先修正 type 属性。

• 无障碍考量：type="button" 不影响键盘可访问性（空格键仍可触发 click），且符合 WAI-ARIA 实践，推荐作为标准写法。

总之，避免 Enter 误删的核心在于语义化地使用 HTML 属性——让按钮明确表达“仅执行 JavaScript 逻辑，不参与表单提交”。这一微小但关键的标记修正，能显著提升表单交互的健壮性与用户体验。