我有一个表单，在某个地方有一个提交按钮。
但是，我想以某种方式“捕获”提交事件并防止它发生。
有什么办法可以做到这一点吗？
我无法修改提交按钮，因为它是自定义控件的一部分。
如何防止表单被提交？
IT技术
javascript
html
forms
2021-01-29 23:29:34
6个回答
与其他答案不同，返回false只是答案的一部分。考虑在 return 语句之前发生 JS 错误的场景......
html
<form onsubmit="return mySubmitFunction(event)">
...
</form>
脚本
function mySubmitFunction()
{
someBug()
return false;
}
返回false这里不会被执行，表单将以任何一种方式提交。您还应该调用preventDefault以阻止 Ajax 表单提交的默认表单操作。
function mySubmitFunction(e) {
e.preventDefault();
someBug();
return false;
}
在这种情况下，即使有错误，表单也不会提交！
或者，try...catch可以使用块。
function mySubmit(e) {
e.preventDefault();
try {
someBug();
} catch (e) {
throw new Error(e.message);
}
return false;
}
您可以onsubmit像这样使用内联事件
<form onsubmit="alert('stop submit'); return false;" >
或者
<script>
function toSubmit(){
alert('I will not submit');
return false;
}
</script>
<form onsubmit="return toSubmit();" >
现在，在进行大型项目时，这可能不是一个好主意。您可能需要使用事件侦听器。
请在此处阅读有关内联事件与事件侦听器（addEventListener 和 IE 的 attachEvent）的更多信息。因为我无法比Chris Baker解释得更多。
两者都是正确的，但它们本身都不是“最好的”，开发人员选择使用这两种方法可能是有原因的。
使用.addEventListener()以下.preventDefault()方法将事件侦听器附加到表单，然后调用方法event：
const element = document.querySelector('form');
element.addEventListener('submit', event => {
event.preventDefault();
// actual logic, e.g. validate the form
console.log('Form submission cancelled.');
});<form>
<button type="submit">Submit</button>
</form>我认为这是一个比定义一个submit与onsubmit属性内联的事件处理程序更好的解决方案，因为它将网页逻辑和结构分开。维护逻辑与 HTML 分离的项目要容易得多。请参阅：不显眼的 JavaScript。
使用DOM 对象的.onsubmit属性form不是一个好主意，因为它会阻止您将多个提交回调附加到一个元素。请参阅addEventListener 与 onclick
。
试试这个...
HTML代码
<form class="submit">
<input type="text" name="text1"/>
<input type="text" name="text2"/>
<input type="submit" name="Submit" value="submit"/>
</form>
jQuery 代码
$(function(){
$('.submit').on('submit', function(event){
event.preventDefault();
alert("Form Submission stopped.");
});
});
或者
$(function(){
$('.submit').on('submit', function(event){
event.preventDefault();
event.stopPropagation();
alert("Form Submission prevented / stopped.");
});
});
以下工作截至目前（在 chrome 和 firefox 中测试）：
<form onsubmit="event.preventDefault(); return validateMyForm();">
其中 validateMyForm() 是一个false在验证失败时返回的函数。关键点是使用名称event。我们不能用于例如e.preventDefault()