表单 onSubmit 触发错误按钮

Question

我有一个带有输入和两个按钮的表单，一个是“按钮”取消，一个是“输入”提交。但是，当我在输入时按下返回键时，onSubmit 事件会根据它们在 HTML DOM 上的位置触发按钮。这是简化的代码

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

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

cancelButton.addEventListener('click', () => { console.log('cancel') });
form.addEventListener('submit', () => { console.log('submit') });

当我按回车键输入时，它会记录“取消”。但是，如果我先放置提交按钮，我将正常记录“提交”。

返回键怎么可能触发取消按钮上的监听器？

Answer 1

默认情况下，button 标记类型为 submit
所以你应该指定类型以避免这个问题

cf：https://www.w3schools.com/tags/tag_button.asp中的提示和注释部分

const cancelButton = document.getElementById('cancel');
const form =  document.getElementById('form');
cancelButton.addEventListener('click', () => { console.log('cancel') });
form.addEventListener('submit', () => { console.log('submit') });

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