javascript - onsubmit 方法 vs 提交事件监听器

Question

我一直在为一门类(class)编写一个邮件程序，我遇到了我不理解的与通过 return false 阻止表单提交相关的行为:

案例 1:表单提交未被正确阻止，DOM 重新加载并出现 200 错误

document.querySelector('#compose-form').addEventListener('submit', () => {

send_email();

load_mailbox('inbox');

return false;

})

案例 2:表单提交被正确阻止并且 DOM 没有重新加载并返回预期的 201 代码

document.querySelector('#compose-form').onsubmit = () => {

send_email();

load_mailbox('inbox');

return false;

}

Answer 1

区别在于onsubmit 替换了当前(已经分配)的函数。另一方面，addEventListener 向已经存在的属性添加一个额外的命令。

因此，在您使用 addEventListener 的情况下，您需要使用 preventDefault 函数来防止默认行为。

试试这个:

// add event as an argument
document.querySelector('#compose-form').addEventListener('submit', (event) => {
  event.preventDefault(); // add this line

  // and then do your stuff
  send_email();
  load_mailbox('inbox');
  return false;

})