Как я могу предотвратить отправку формы (навигация по страницам) на искусственном событии отправки в 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 к объекту EventInit, который необходимо передать конструктору Event.По умолчанию это false.

Рассмотрим Документация по событиям MDN :

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

событие отправки заставляет отправить форму, если вы не сделаете ее отменяемой. Вы также можете добавить <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>

Надеюсь, это поможет