为什么我不能在 jQuery 中的提交事件的处理程序中阻止表单提交？答案

【问题标题】：Why can't I prevent form submission inside a handler for the submit event in jQuery?为什么我不能在 jQuery 中的提交事件的处理程序中阻止表单提交？
【发布时间】：2015-11-18 20:02:23
【问题描述】：

假设我有一个 id 为“edit-resource”的表单，稍后将出现在模式对话框中。

我像这样在文档中附加了一个监听器，这样无论模态表单被回发和替换多少次，它都会捕获事件。

$(document).on('submit', '#edit-resource', function(e) {
    //breakpoint
    //ajax request with new FormData
    return false; //cancel submit
});

当我提交表单时，事件处理程序按预期运行，但在断点被命中时...帖子已经命中服务器（服务器也有一个断点）。提交事件应该是可取消的（即通过返回 false），但如果它已经被处理程序的第一行击中服务器，则不能取消此类事件。是什么导致了这个问题？

【问题讨论】：

标签： jquery form-submit cancellation event-capturing

【解决方案1】：

使用.preventDefault

$(document).on('submit', '#edit-resource', function(e) {
    e.preventDefault(); // Will stop your form from submission
    //breakpoint
    //ajax request with new FormData
    return false; //cancel submit
});

【讨论】：

不。如果我打破 e.preventDefault... 提交已经到达服务器。我有一种不好的感觉，这是 JavaScript 事件模型中的一个可怕的设计缺陷。在 Flash/AS3 中，它是完美的。调用 EventDispatcher.dispatchEvent 方法来运行处理程序，它返回 true 或 false，指示是否在事件上调用了 preventDefault。因此，只有在所有事件处理程序都完成并且它们都有机会调用 preventDefault 之后，才能进行任何操作。
如果 JavaScript 的事件模型（或调试系统，或启动异步操作）允许在处理程序返回之前提交表单，则它们是非常错误的。 return false 语句应该导致 jQuery 调用 preventDefault 和 stopPropagation。如果表单在被调用时已经发布了数据，那么它们将无效。事件中的“this”目标在 jQuery 中也高度不一致，具体取决于是否像这样过滤事件，而在 AS3 中，事件是强类型对象，并且始终具有 target 和 currentTarget。
这些应该是基于相同的 ECMAScript 规范，但在 AS3 之后将近十年...... JavaScript 仍然有问题。
这可能是 4 年前在 jQuery 中引入的错误，请注意底部的修复：“延迟附加到真正的提交事件以进行委托。”当委托的事件处理程序运行时，“真正的”事件已经完成。 bugs.jquery.com/ticket/7061 绝对可怕。这使得在处理提交事件时，委托事件处理程序无法使用返回 false 或调用 preventDefault 的整个系统。