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

实际上，以同样的方式！ demo

一些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使用hoisting，因此在使用var定义函数时需要注意事项的顺序。

详细了解addEventListener和EventListener界面。

Answer 2

我知道这是旧的，但仅仅是为了它。尝试

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

Answer 3

你所要做的就是给你的函数添加一个参数并在里面使用它。

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

里面的参数现在代表来自 addEventListener 的参数。

如何防止表单提交默认？

3 个答案: