威廉穆斯利1. 先还原现场：页面刷新的"元凶"抓到了
1.1 最小复现：三行代码就能触发
大概每个写过表单的人都被这个问题撂倒过一次。你写了一个登录框，里面放了一个搜索按钮，点击之后页面"唰"地一下刷新了，填了一半的数据全没了，地址栏里还多了一串问号参数。更气人的是，明明在JS里绑定了click事件，断点都打了，代码也执行了，页面还是照样跳转。
先给一个最小复现，你可以直接复制过去跑一下：
html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>button默认提交复现</title>
</head>
<body>
<form action="/search" method="get">
<input type="text" name="keyword" placeholder="输入搜索关键词">
<button>搜索</button>
</form>
<script>
document.querySelector('button').addEventListener('click', function () {
console.log('按钮被点击了');
});
</script>
</body>
</html>
打开页面，随便输入点内容，点"搜索"，控制台里确实打印了"按钮被点击了"，但紧接着页面就跳到了/search?keyword=xxx。如果你的本地没有这个接口，就会看到一个404，或者干脆整体刷新一次，输入框里的内容全部丢失。
这个现象就是标题里说的——button标签在form中点击时，默认提交了表单。
1.2 现象拆解：从点击到页面刷新发生了什么
把整个过程拆开看，其实是一次"双重执行"：
- 鼠标按下并抬起，触发button的click事件，你绑定的处理函数正常执行。
- 与此同时，因为button位于form内部，并且没有显式声明type，浏览器按照默认规则把它当成submit按钮，触发了表单提交。
- 表单提交后，浏览器按form的action地址发起请求。GET请求会把表单字段拼到query string里，页面随之跳转或刷新。
问题就出在这里：很多人以为"点击"和"提交"是两件不相关的事，但在浏览器眼里，一个没有type的button，它的本职就是"提交表单"。你的click事件只是附加动作，默认行为照样发生。
这块我有过一段印象很深的经历。早年做一个后台管理系统，列表页有个高级搜索区域，里面放了查询按钮和重置按钮，两个都是裸写的button。结果重置按钮点击后，表单直接提交了，查询条件没清空，反而把页面整体刷新了一遍。后来排查才发现，重置按钮的click逻辑写得好好的，但它同时也在执行submit，两个动作叠加在一起，效果完全乱了。
所以遇到这类问题，第一步不是急着改代码，而是先搞清楚：这个按钮在浏览器里的"默认身份"到底是什么。后面所有的解决方案，本质上都是围绕"改变默认身份"或者"拦截默认行为"这两条路走的。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 为什么button默认就是submit：规范、历史与input的对比
2.1 规范怎么说：默认值就是submit
很多人有个误解，以为button不写type就什么都不是，或者默认是button类型。这是错的。在HTML规范里，button元素的type属性默认值就是submit，这个规则从HTML4时代就定下来了，HTML5继续沿用，直到今天都没有变过。
规范原文的意思是：当type属性缺失或者值无效时，button会按照submit按钮来处理。这一点是很多"工作了三五年"的前端偶尔也会记岔的地方，因为直觉上"button"这个标签名对应的类型就该叫"button"，但规范不是这么定的。
这种行为背后有历史原因。早期网页中，表单是最核心的交互载体，一个form里通常只需要一个提交按钮。为了保证"按钮放在form里就能提交"，规范把submit作为默认值，这样即使作者忘了写type，表单也能正常工作。你可以把它理解成一道"兜底保险"，为的是让古代那些手写HTML的人少踩坑。
但到了现代前端，页面上的交互逻辑复杂得多，一个form里可能有好几个按钮：查询、重置、批量操作、打开弹窗……这些按钮绝大多数都不应该触发提交。于是，这道"兜底保险"反而成了大家最常踩的坑。可以说，这个默认设计在它诞生的年代是合理的，只是今天的使用场景变了，问题才暴露出来。
2.2 最容易踩的对比坑：input和button的性格完全不同
和button形成鲜明对比的是input标签。input虽然可以设置type="bu