如何防止在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 属性添加到您需要传递给Event 构造函数的EventInit 对象来创建事件cancelable。默认为false。

考虑MDN Event Documentation：

cancelable：一个Boolean，表示该事件是否可以 取消。默认为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>

Answer 2

dispatch 事件强制提交表单，除非您将其设置为可取消。也可以加<form onsubmit="return false"> 一个快速的解决方案是：

<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
 })
 let event = new Event("submit", {
  bubbles: true,
  cancelable: true,
});
form.dispatchEvent(event);
</script>

希望对你有帮助