从javascript停止表单提交

我已经为这个问题准备了这个演示

如您所见，当您尝试通过输入提交表单时，表单将停止，但当您单击按钮时，表单将提交。调用

.submit（）

时如何防止表单提交而不覆盖函数的默认行为，因为调用表单时还需要保持其他提交侦听器处于活动状态

HTML 编辑：我错了，我误解了你的问题。您只需要将事件侦听器绑定到submit方法并运行相同的preventDefault方法

---

您可以这样做：

(function() {
  var form = document.getElementById('form');
  var submit = form.submit;

  form.submit = function() {
    var evt = new Event('submit', {
      cancelable: true
    });

    form.dispatchEvent(evt);

    //minimc the default behaviour and submit the form if 'preventDefault'  was not called.
    if (!evt.defaultPrevented) {
      submit.call(form);
    }
  };
}());

function submitCallback(e) {
    e.preventDefault();
    alert('stopped');
}    

document.getElementById('form').addEventListener('submit', submitCallback, false);

formPreventSubmit(document.getElementById('form'), submitCallback);


function formPreventSubmit(form, submitCallback) {
  var submit = form.submit;

  form.submit = function() {
    var evt = new SomeCustomEvent();

    submitCallback(evt)

    if (!evt.defaultPrevented) {
      submit.call(form);
    }
  };
}

但这可能会导致旧浏览器内存泄漏

编辑更新代码以包含事件发射。这仅在最新的WebKit/BLINK和FireFox中测试。对于IE和较旧的浏览器，您可能需要一个后备方案

编辑2
您可能应该考虑另一种解决方案，例如：

(function() {
  var form = document.getElementById('form');
  var submit = form.submit;

  form.submit = function() {
    var evt = new Event('submit', {
      cancelable: true
    });

    form.dispatchEvent(evt);

    //minimc the default behaviour and submit the form if 'preventDefault'  was not called.
    if (!evt.defaultPrevented) {
      submit.call(form);
    }
  };
}());

function submitCallback(e) {
    e.preventDefault();
    alert('stopped');
}    

document.getElementById('form').addEventListener('submit', submitCallback, false);

formPreventSubmit(document.getElementById('form'), submitCallback);


function formPreventSubmit(form, submitCallback) {
  var submit = form.submit;

  form.submit = function() {
    var evt = new SomeCustomEvent();

    submitCallback(evt)

    if (!evt.defaultPrevented) {
      submit.call(form);
    }
  };
}

---

SomeCustomEvent

需要是一个类，它模仿具有

preventDefault

函数的真实事件的行为。

为什么？如果有人想在表单上调用

.submit（）

，很明显，他们想提交，你为什么要阻止他们？你正在创造一个比赛条件。至于评论，关于这个网站有很多你不知道的事情：）我真的不想详细讨论这个，但是，好吧，这是你自己带来的！我有一个脚本，它使用一个隐藏的表单从整个页面的输入提交请求。也就是说，我有评论，而不是到处都有表单，我只是把文本区域映射到一个表单，因为你一次只能发送一条评论，我想这不是问题。然而，我有另一个脚本，它截取表单提交并执行一系列其他操作，然后通过另一个表单提交数据。除了黑客之外，它还对垃圾邮件机器人有很大帮助。无论如何，那是why@php_nub_qq请看这篇文章：但是

submit

不是

form

的孩子：？@php\u nub\u qq我以为你想阻止

document.getElementById（'form'）.submit（）从提交表单开始？哦，对不起，现在我知道你做了什么。这是一个好主意，但不幸的是无法实现，因为我无法取消
form.submit（）
的默认行为。例如，如果我这样做了，那么调用
form.submit（）
不会触发submitlisteners@php_nub_qq正如您在fiddle中看到的，偶数侦听器仍然被调用，如果您删除侦听器中的
e.preventDefault（）
，表单仍将被提交。这只会阻止直接调用
document.getElementById（'form'）.submit（）
调用。@php\u nub\u qq更新了代码以发出事件。但您最好使用类似于我添加到EDIT 2的代码的方法。这与按钮无关，我可以从任何地方调用
.submit（）
，这正是我要做的？而且我没有使用jquery
function submitCallback(e) {
    e.preventDefault();
    alert('stopped');
}    

document.getElementById('form').addEventListener('submit', submitCallback, false);

formPreventSubmit(document.getElementById('form'), submitCallback);


function formPreventSubmit(form, submitCallback) {
  var submit = form.submit;

  form.submit = function() {
    var evt = new SomeCustomEvent();

    submitCallback(evt)

    if (!evt.defaultPrevented) {
      submit.call(form);
    }
  };
}