写了点击事件，表单却还是提交了：一次 button 类型遗漏

一个 Thymeleaf 表单里有多个按钮，其中一个应执行单独的 JavaScript 逻辑。但点击后，页面仍提交到了 form 的 th:action 指向的地址。

原因不是模板引擎失效，而是按钮没有明确写 type。在常规表单提交场景里，默认按钮行为可能触发表单提交；绑定了点击函数，并不会自动取消默认动作。

普通操作与提交操作分开

下面是浏览器收到的 HTML 示意：

<form action="/save" method="post">
  <input name="title" required>
  <button type="button" id="preview">预览</button>
  <button type="submit">保存</button>
</form>

<script>
  document.getElementById('preview').addEventListener('click', function () {
    console.log('执行预览逻辑');
  });
</script>

预览按钮只触发处理逻辑，保存按钮明确触发表单提交。在 Thymeleaf 中，action 可以由 th:action 渲染生成，但最终按钮类型仍遵守 HTML 规则。MDN button

真的要提交到另一个地址时

若两个按钮都应提交，只是目标不同，可以评估 submit 按钮的 formaction，或在统一的 submit 流程中明确选择目标和校验规则。不要把所有按钮都改成 type=button 后，再零散地拼接提交逻辑。

如果需要有条件阻止默认提交，应在适当的事件里调用 event.preventDefault()，同时确保业务逻辑与校验契约明确。直接返回 false 是否有效，取决于事件绑定方式，不能当作所有监听器的通用规则。

看最终页面，而不只看模板

检查浏览器最终 DOM 中的按钮类型、所属 form 和提交目标，再观察是否重复绑定监听器、是否有其他代码触发提交。还应验证回车提交与表单校验，不能只测试鼠标点击。

这次处理给普通操作按钮加上 type=button 后恢复，能复用的经验是让按钮意图明确，而不是把 HTML 默认行为归成 Thymeleaf 的 bug。