使用外部函數停止表單提交而無需使用內聯JavaScript

Question

為了重新使用此功能，我試圖在不使用內聯JavaScript的情況下停止表單提交。

我不了解onsubmit或addEventListener的這種行為。

這些功能均無效。

 window.onload = function() { document.getElementById("myForm1").onsubmit = function(){myFunction1()}; document.getElementById("myForm2").addEventListener("submit", myFunction1); } function myFunction3() { alert("The form was submitted"); event.preventDefault(); return false; } function myFunction2() { alert("The form was submitted"); preventDefault(); } function myFunction1() { alert("The form was submitted"); return false; } 

 <form id="myForm1" action="/action_page.php"> Enter name: <input type="text" name="fname"> <input type="submit" value="Submit1"> </form> <form id="myForm2" action="/action_page.php"> Enter name: <input type="text" name="fname"> <input type="submit" value="Submit2"> </form> 

Answer 1

Function1未指定event.preventDefault();

更改為：

function myFunction1() {
    alert("The form was submitted");
    event.preventDefault();
    return false;
}

 window.onload = function() { document.getElementById("myForm1").onsubmit = function(){myFunction1()}; document.getElementById("myForm2").addEventListener("submit", myFunction1); } function myFunction1() { alert("The form was submitted"); event.preventDefault(); return false; } 

 <form id="myForm1" action="/action_page.php"> Enter name: <input type="text" name="fname"> <input type="submit" value="Submit1"> </form> <form id="myForm2" action="/action_page.php"> Enter name: <input type="text" name="fname"> <input type="submit" value="Submit2"> </form> 

Answer 2

提交表單后，它將調度一個submit事件，該事件將調用偵聽該事件的所有事件。 事件將接收一個Event對象作為它們的第一個參數。 您需要使用此參數來調用preventDefault() 。

function handleSubmit(event) {
  event.preventDefault();
  return false;
}

window.onload = function () {
  document.getElementById('myForm1').addEventListener('submit', handleSubmit);
}

在所有示例中，您永遠都無法掌握該事件，這就是為什么它們都失敗的原因。