当页面中动态生成多个表单项，且删除按钮未显式声明 type="button" 时，浏览器会将其默认视为 type="submit"，导致在输入框内按 Enter 键触发表单提交（或冒泡至父表单），进而意外触发绑定的删除逻辑。
当页面中动态生成多个表单项，且删除按钮未显式声明 `type="button"` 时，浏览器会将其默认视为 `type="submit"`，导致在输入框内按 enter 键触发表单提交（或冒泡至父表单），进而意外触发绑定的删除逻辑。
在 Web 表单交互开发中，一个常见却易被忽视的问题是：点击删除按钮正常工作，但用户在任意输入框中按下 Enter 键时，同一行也被意外删除。根本原因在于 HTML 规范中
这意味着：
- 若该按钮位于
- 即使表单无 onsubmit 处理，提交行为仍可能触发页面刷新或事件冒泡；
- 更关键的是，在使用事件委托（如 $("body").on("click", ...)）监听 .remove_node_btn_frm_field 时，表单提交引发的页面重绘或 DOM 重排可能干扰事件流，而更常见的情况是：Enter 键意外聚焦并激活了该按钮（尤其在动态渲染场景下），导致点击事件被模拟触发。
✅ 正确做法：始终为非提交用途的按钮显式声明 type="button"。
<!-- ❌ 危险写法：依赖默认 type，易引发 Enter 误删 --> <button class="remove_node_btn_frm_field">− 删除</button> <!-- ✅ 安全写法：明确语义，杜绝 submit 行为 --> <button type="button" class="remove_node_btn_frm_field">− 删除</button>
同时，建议配合以下增强措施，提升健壮性：
-
阻止表单默认提交（防御性补充）：
若无法完全控制按钮类型（如第三方组件限制），可在表单层级拦截 Enter 提交：$("body").on("keydown", "form", function (e) { if (e.key === "Enter" && e.target.tagName !== "TEXTAREA") { e.preventDefault(); // 阻止 input/textarea 外的 Enter 提交 } }); 确保事件委托精准匹配：
当前的 jQuery 事件委托写法正确（使用 $("body").on("click", selector, handler)），适用于动态添加的按钮，无需额外修改。
⚠️ 注意事项：
- 不要仅依赖 e.stopPropagation() 或 return false 在删除处理器中拦截 Enter —— 因为 Enter 并未直接触发该 handler，而是通过表单机制间接影响；
- 避免将删除按钮包裹在
- 在 React/Vue 等框架中，同样需显式设置 type="button"，框架不会自动修正 HTML 默认行为。
总结：。一行明确的 type="button"，即可彻底切断 Enter 键与删除操作之间的隐式关联，兼顾语义清晰性与交互可靠性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
