javascript - 如何防止表单提交默认？

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

其实也是一样的!

// 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);

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

注意:当使用 .addEventListener 时，您应该使用 submit 而不是 onsubmit。

注意 2:由于您定义 my_func 的方式，在定义函数 之后调用 addEventListener 非常重要。 JavaScript 使用 hoisting因此在使用 var 定义函数时需要注意事物的顺序。

阅读更多关于 addEventListener 的信息和 EventListener界面。