javascript - 如何防止在 firefox 中的人工提交事件中提交表单(页面导航)？

Question

似乎我所做的一切都无法阻止表单加载新页面。我有以下测试代码:

<form id="form" onsubmit="return false">
 <input id='input'>
 <input id='submit' type="button" value="click me">
</form>
<script>
 var form = document.getElementById("form")
 form.addEventListener("submit", (ev) => {
   console.log("submit")
   ev.preventDefault()
   ev.returnValue = false
   return false
 })
 form.dispatchEvent(new Event('submit'))
</script>

页面只是一遍又一遍地加载和重新加载。这是 Firefox 中的错误吗？我的版本是 60.7.0esr

Answer 1

您需要制作事件 cancelable通过添加 cancelable属性(property)给EventInit您需要传递给 Event 的对象构造函数。是false默认情况下。

考虑 MDN Event Documentation :

cancelable: a Boolean indicating whether the event can be cancelled. The default is false.

var form = document.getElementById("form")
form.addEventListener("submit", (ev) => {
  console.log("submit")
  ev.preventDefault()
  ev.returnValue = false
  return false
})
form.dispatchEvent(new Event('submit', {
  cancelable: true
}))

<form id="form" onsubmit="return false">
  <input id='input'>
  <input id='submit' type="button" value="click me">
</form>