form内放置button导致浏览器无报错崩溃的原因及解决方法求助

问题成因 #

HTML 规范要求，<form> 标签内的 <button> 元素如果没有显式声明 type 属性，默认会被识别为 submit 类型。你遇到的问题根源就在这里：

• 点击按钮时，除了你绑定的 onClick 逻辑，还会默认触发表单提交行为
• 你的表单内设置了多个带 required 属性的输入框，填充数据后点击按钮，浏览器执行完alert逻辑后会触发原生表单校验流程
• MaterializeCSS 模态框本身是基于固定定位、层级管理的浮层组件，原生表单校验的提示气泡和模态框的事件冒泡、渲染逻辑冲突，最终触发浏览器渲染进程崩溃，出现白屏
• 空弹窗场景下，浏览器会直接在校验阶段拦截提交，不会触发后续的冲突逻辑，所以不会出现崩溃

解决方法 #

任选一种即可修复：

1. 给按钮显式指定 type="button"，明确为普通交互按钮，不会触发表单提交：

<button id="dotaceAdminDalsiSkola" type="button" class="waves-effect btn" onClick="dotaceAdminDalsiSkolaFun()">Přidat další školu</button>

2. 在点击事件回调中阻止默认提交行为：

function dotaceAdminDalsiSkolaFun(event) {
  event.preventDefault();
  // 原有业务逻辑保持不变
}

调试方案 #

后续遇到同类问题可按以下步骤排查：

• 打开浏览器开发者工具的「元素」面板，选中对应按钮，在「事件监听器」标签下查看是否有上层form的submit事件被触发
• 开启「性能」面板录制，复现崩溃场景，查看崩溃前是否存在异常长任务、高频重排重绘逻辑
• 给form元素绑定submit事件断点，确认提交行为的触发时机是否符合预期

内容的提问来源于stack exchange，提问作者Radek