jquery - 在多个表单提交处理程序中的第一个中返回 false

Question

我有两个提交处理程序，一个验证表单，一个提交表单:

// validates the form but does not submit it
$("form").submit(function() {
  // perform validation here and set "validationFails" appropriately
  // ...
  if (validationFails) {
    return false;
  }
});

// submits the form via ajax
$("form").submit(function(event) {
  event.preventDefault();
  // submit the form via ajax here
  // ...
});

如果验证失败，表单似乎不应该通过ajax提交，因为使用了return false，因此不应该调用链中后续的submit处理程序。然而，即使验证失败，表单也会通过ajax提交。为什么？

Answer 1

从事件处理程序返回 false 相当于调用 event.preventDefault() 和 event.stopPropagation() ，也就是说，它阻止事件的默认操作发生，并阻止事件在 DOM 树中冒泡。它不会阻止同一元素上的其他处理程序运行。

您需要调用event.stopImmediatePropagation() method - 阻止绑定(bind)到同一元素的其他处理程序运行，注意处理程序将以它们绑定(bind)的相同顺序运行，因此您(显然)必须首先绑定(bind)验证处理程序。

$("form").submit(function(event) {
  // perform validation here and set "validationFails" appropriately
  // ...
  if (validationFails) {
      event.stopImmediatePropagation();
      return false;
  }
});