如何防止表单提交默认？

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接口的更多信息.