如何防止表單提交默認？

Question

如果我這樣做，我可以防止表單默認提交就好了：

document.getElementById('my-form').onsubmit(function(e) {
   e.preventDefault();
   // do something
});

但是由於我以模塊化方式組織我的代碼，所以我正在處理這樣的事件：

document.getElementById('my-form').addEventListener('onsubmit', my_func);

var my_func = function() {
   // HOW DO I PREVENT DEFAULT HERE???
   // do something
}

我現在如何防止默認？

Answer 1

同樣的方式，其實！ 演示

一些 HTML

<form id="panda" method="post">
    <input type="submit" value="The Panda says..."/>
</form>

你的 JavaScript

// your function
var my_func = function(event) {
    alert("me and all my relatives are owned by China");
    event.preventDefault();
};

// your form
var form = document.getElementById("panda");

// attach event listener
form.addEventListener("submit", my_func, true);

---

注意：當使用.addEventListener你應該使用submit而不是onsubmit 。

注 2：由於定義my_func的方式，在定義函數后調用addEventListener很重要。 JavaScript 使用提升，因此在使用var定義函數時需要注意事物的順序。

閱讀有關addEventListener和EventListener接口的更多信息。

Answer 2

您所要做的就是向您的函數添加一個參數並在其中使用它。

var my_func = function(event) {
   
   event.preventDefault();
   
}

里面的參數現在代表來自 addEventListener 的參數。

Answer 3

我知道這是舊的，但只是為了它。 嘗試

document.getElementById('my-form').addEventListener('onsubmit', 
function(event){event.preventDefault();my_func();});
var my_func = function() {
// HOW DO I PREVENT DEFAULT HERE???
// do something
}