如何防止表单提交的默认值？答案

【问题标题】：How to prevent default on form submit?如何防止表单提交的默认值？
【发布时间】：2013-07-16 13:23:42
【问题描述】：

如果我这样做，我可以很好地防止表单提交的默认设置：

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
}

我现在如何防止默认？

【问题讨论】：

同理。浏览器（好吧，不错的）将事件对象作为参数传递。
哈哈，如果你想变坏，你可以随时输入<form onsubmit="return false;">
注意：使用onclick property时，只需设置：elem.onclick = function () { ... };。否则，您会尝试使用新的处理程序作为参数调用以前的处理程序。
@JonathanLonowski 哈哈希望这是一个错字
stackoverflow.com/questions/7410063/…

标签： javascript

【解决方案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 接口。

【讨论】：

不，return false 不像您想象的那样工作。也许在 jQuery 中，但绝对不是 addEventListener

【解决方案2】：

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

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

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

【讨论】：

【解决方案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
}

【讨论】：

使用 EventListeners 时，使用事件名称而不是操作。对于您的答案，应该是 addEventListener('click', ...) 而不是 addEventListener('onclick', ...)