Javascript 表单onSubmit触发了错误的按钮

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

// 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') });

//首先是取消按钮
取消
const cancelButton=document.getElementById（'cancel'）；
const form=document.getElementById（'form'）；
cancelButton.addEventListener（'click'，（）=>{console.log（'cancel'）}）；
form.addEventListener（'submit'，（）=>{console.log（'submit'）}）；

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

---

返回键如何触发“取消”按钮上的侦听器？

默认情况下，

按钮

标记类型为

提交

因此，您应该指定类型以避免此问题

cf:

const cancelButton=document.getElementById（'cancel'）；
const form=document.getElementById（'form'）；
cancelButton.addEventListener（'click'，（）=>{console.log（'cancel'）}）；
form.addEventListener（'submit'，（）=>{console.log（'submit'）}）

取消
默认情况下，
按钮
标记类型为
提交


因此，您应该指定类型以避免此问题

cf:


const cancelButton=document.getElementById（'cancel'）；
const form=document.getElementById（'form'）；
cancelButton.addEventListener（'click'，（）=>{console.log（'cancel'）}）；
form.addEventListener（'submit'，（）=>{console.log（'submit'）}）

取消
什么是变量
取消按钮
和
表单
-您还没有显示这些变量是什么represent@JaromandaX对不起，我太懒了，让我穿上吧。我知道这可能很明显，只是想排除愚蠢的打字错误：p@JaromandaX是的，这只是一种伪代码，代码更复杂。但让我看看是否有打字错误。@h1b9b答案很好，但作为旁白。。。你为什么不坚持用同样的东西呢<代码>取消
和提交

或使它们都成为`元素。无论哪种方式，您都将事件处理程序连接到它们。如果它们都是同一类型的东西，那么在设计上似乎更为一致。变量是什么

cancelButton

和

form

-您还没有显示这些变量是什么represent@JaromandaX对不起，我太懒了，让我穿上吧。我知道这可能很明显，只是想排除愚蠢的打字错误：p@JaromandaX对这只是一种伪代码，代码更复杂。但让我看看是否有打字错误。@h1b9b答案很好，但作为旁白。。。你为什么不坚持用同样的东西呢<代码>取消和提交或使它们都成为`元素。无论哪种方式，您都将事件处理程序连接到它们。如果它们都是同一种东西，那么在设计上似乎更为一致。你比我强：）非常感谢！但我刚刚发现onSubmit不起作用，哈哈，当我按return键时，它不会记录任何不起作用的东西？在本例中，通过按return键，将执行console.log并发布表单，因此如果不在控制台中保留日志，则不会看到任何内容。您还可以

preventDefault

停止事件propagation@h1b9b是的，我设置了preventDefault，但按return键甚至不会进入函数（我在函数上设置了断点）@h1b9b我发现如果我添加listener to submit按钮，按return键将在该侦听器上触发，但表单上的侦听器永远不会触发。这很奇怪，因为昨天很好。你赢了我：）太谢谢你了！但我刚刚发现onSubmit不起作用，哈哈，当我按return键时，它不会记录任何不起作用的东西？在本例中，通过按return键，将执行console.log并发布表单，因此如果不在控制台中保留日志，则不会看到任何内容。您还可以

preventDefault

停止事件propagation@h1b9b是的，我设置了preventDefault，但按return键甚至不会进入函数（我在函数上设置了断点）@h1b9b我发现如果我添加listener to submit按钮，按return键将在该侦听器上触发，但表单上的侦听器永远不会触发。这很奇怪，因为昨天天气很好。