这个问题的根源其实很好理解：HTML里的<button>元素默认的type属性是submit，也就是说你写的“取消按钮”本质上也是一个提交按钮！当表单里存在多个提交按钮时，浏览器会把DOM中第一个出现的提交按钮当作默认按钮，按下回车键时就会触发它的提交行为——这就是按钮位置会影响回车触发结果的核心原因。

最直接的解决方案：给取消按钮明确设置type="button" #

只需要修改取消按钮的代码，给它加上type="button"，这样它就彻底失去了提交表单的功能，回车时自然只会触发真正的提交按钮，完全不受DOM位置影响：

<form id="form">
  <input>
  <button id="cancel" type="button">Cancel</button>
  <input type="submit" value="Submit">
</form>

之后你可以给这个取消按钮绑定点击事件来实现取消逻辑，比如：

const cancelButton = document.getElementById('cancel');
const form = document.getElementById('form');

cancelButton.addEventListener('click', () => {
  // 这里写取消的逻辑，比如清空输入框、重置表单等
  form.reset();
});

备选方案：调整DOM顺序+CSS修正布局 #

如果因为某些限制不能修改按钮的type属性，你可以把提交按钮放在DOM结构的前面，然后用CSS调整视觉上的显示位置，让它看起来还是在取消按钮后面。比如用Flex布局的order属性：

<form id="form" style="display: flex; gap: 8px; align-items: center;">
  <input style="flex: 1;">
  <!-- 提交按钮放DOM前面 -->
  <input type="submit" value="Submit" style="order: 2;">
  <button id="cancel">Cancel</button>
</form>

这样DOM里提交按钮是第一个提交按钮，回车会触发它，同时通过order属性让它在视觉上显示在取消按钮后面。不过这个方案需要额外调整样式，不如第一种方案直接推荐。

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