如何防止表单提交？

Question

如何防止表单提交？

我有一个表格，里面有个提交按钮。

然而，我想以某种方式“捕捉”提交事件并防止其发生。

有什么办法我能做到吗？

我无法修改Submit按钮，因为它是自定义控件的一部分。

Answer 1

不像其他答案，返回false只是部分答案。考虑在返回语句之前发生JS错误的情况.HTML<form&nbsp;onsubmit="return&nbsp;mySubmitFunction(event)"> &nbsp;&nbsp;...</form>剧本function&nbsp;mySubmitFunction(){ &nbsp;&nbsp;someBug() &nbsp;&nbsp;return&nbsp;false;}回归false这里不会执行，表单将以任何方式提交。你也应该打电话给preventDefault若要防止Ajax表单提交的默认表单操作，请执行以下操作。function&nbsp;mySubmitFunction(e)&nbsp;{ &nbsp;&nbsp;e.preventDefault(); &nbsp;&nbsp;someBug(); &nbsp;&nbsp;return&nbsp;false;}在这种情况下，即使有错误，表单也不会提交！或者，try...catch可以用块。function&nbsp;mySubmit(e)&nbsp;{&nbsp; &nbsp;&nbsp;e.preventDefault();&nbsp; &nbsp;&nbsp;try&nbsp;{ &nbsp;&nbsp;&nbsp;someBug(); &nbsp;&nbsp;}&nbsp;catch&nbsp;(e)&nbsp;{ &nbsp;&nbsp;&nbsp;throw&nbsp;new&nbsp;Error(e.message); &nbsp;&nbsp;} &nbsp;&nbsp;return&nbsp;false;}

Answer 2

可以使用内联事件。onsubmit像这样<form&nbsp;onsubmit="alert('stop&nbsp;submit');&nbsp;return&nbsp;false;"&nbsp;>或<script> &nbsp;&nbsp;&nbsp;function&nbsp;toSubmit(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('I&nbsp;will&nbsp;not&nbsp;submit'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;}</script><form&nbsp;onsubmit="return&nbsp;toSubmit();"&nbsp;>演示现在，在做大型项目时，这可能不是个好主意。您可能需要使用事件侦听器。请阅读更多关于内联事件与事件侦听器(addEventListener和IE的attachEvent)这里..因为我无法解释克里斯·贝克做。这两种方法都是正确的，但它们中没有一种本身是“最佳”的，开发人员选择使用这两种方法可能是有原因的。

Answer 3

将事件侦听器附加到窗体.addEventListener()然后调用.preventDefault()方法上event:const element = document.querySelector('form');element.addEventListener('submit', event => {&nbsp; event.preventDefault();&nbsp; // actual logic, e.g. validate the form&nbsp; console.log('Form submission cancelled.');});<form>&nbsp; <button type="submit">Submit</button></form>我认为这比定义一个submit事件处理程序与onsubmit属性，因为它将网页逻辑和结构分离。维护逻辑与HTML分离的项目要容易得多。见：低调的JavaScript.使用.onsubmit的属性formDOM对象不是一个好主意，因为它阻止您将多个提交回调附加到一个元素。看见addEventListener与onClick.