在 button 按钮点击时阻止触发外部 form 提交，核心是**切断按钮与表单默认提交行为的关联**。关键不在于“监听 button 点击”，而在于明确按钮类型和事件绑定方式——否则即使没写 submit 逻辑，浏览器也可能自动提交。
确认 button 的 type 属性
默认情况下，<button></button> 在 form 内部会被浏览器视为 type="submit"，只要它没显式声明 type，点击就会触发表单提交。
- ✅ 正确做法：给按钮加上
type="button" - ❌ 错误写法：
<button>点我</button>（无 type，默认 submit） - ✅ 示例：
<button type="button" id="myBtn">执行操作</button>
避免在 button 上用 onclick 触发 submit 行为
有些代码会手动调用 form.submit() 或触发 submit 事件，这属于主动提交，需检查 JS 是否存在类似逻辑：
- 不要在 button 的 click 处理函数里写
document.getElementById('myForm').submit() - 也不要调用
form.dispatchEvent(new Event('submit'))（除非你明确要模拟提交） - 如果只是想运行 JS 逻辑（如弹窗、AJAX），保持 button 是
type="button"即可，无需额外阻止
如果必须用 type="submit"，那就拦截 submit 事件
某些场景（如兼容旧设计、需回车提交）要求按钮保留 type="submit"，此时应在 form 层统一拦截：
立即学习“Java免费学习笔记（深入）”；
- 监听 form 的
submit事件，调用e.preventDefault() - 注意：不要监听 button 的 click 并 return false —— 这只能阻止该次点击，但无法阻止用户按回车提交
- 示例：
document.getElementById('myForm').addEventListener('submit', e => {<br> e.preventDefault();<br> // 自定义逻辑，如验证或 AJAX<br>});
警惕 jQuery 中的 return false 陷阱
在 jQuery 事件中写 return false 确实能同时阻止默认行为和事件冒泡，但它容易掩盖问题：
- 如果 button 是
type="submit"，仅靠 click 里 return false 不够健壮（回车仍会提交） - 推荐统一用原生
preventDefault()+ 显式type="button"组合，语义清晰、行为可控 - jQuery 示例（不推荐优先使用）：
$('button#myBtn').on('click', function(e) { e.preventDefault(); });
