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

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>

我希望这对您有帮助

Answer 2

您需要通过向cancelable对象添加cancelable属性来使事件EventInit传递给Event构造函数。默认情况下为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>

如何防止在Firefox中的人工提交事件中进行表单提交（页面导航）？

2 个答案: