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：Tips＆amp; https://www.w3schools.com/tags/tag_button.asp

中的备注部分

＆＃13;

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

＆＃13;

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

＆＃13;

表单onSubmit触发错误的按钮

1 个答案: