【问题标题】：Stop form submit from javascript停止从 javascript 提交表单
【发布时间】：2015-02-22 15:28:25
【问题描述】：

我已经为问题http://jsfiddle.net/20k4ur8o/准备了这个演示

正如您所看到的，当您尝试通过输入提交表单时，它会停止，但是当您单击按钮时，表单会提交。如何在调用.submit() 时阻止表单提交而不覆盖函数的默认行为，因为我还需要在调用它时保持其他提交侦听器处于活动状态？

HTML

<form action=test id=form>
    <input type=submit>
</form>
<button id=submit>Submit</button>

JS

document.getElementById('form').addEventListener('submit', function (e) {
    e.preventDefault();
    alert('stopped');
}, false);

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

【问题讨论】：

什么意思？还有你到底是怎么发四字评论的O.O
如果有人想在表格上打电话给.submit()，显然他们想提交，你为什么要阻止他们？你正在创造一个竞争条件。至于评论，关于这个网站有很多你不知道的事情:)
我真的不想详细介绍这个，但是，你自己带来的！我有一个脚本，它使用隐藏表单来提交来自整个页面输入的请求。即我有 cmets，而不是到处都有表单，我只是将 textareas 映射到 1 个表单，因为您一次只能发送 1 条评论，我认为这不是问题。但是，我有另一个脚本可以拦截表单提交并执行其他一些操作，然后通过另一个表单提交数据。除了 hacky 之外，它还有助于对抗垃圾邮件机器人。无论如何这就是为什么
@php_nub_qq 看到这个帖子：stackoverflow.com/questions/24248576/…

标签： javascript html forms

【解决方案1】：

你可以这样做：

(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);
    }
  };
}());

但请注意，这可能会导致旧浏览器中的内存泄漏。

编辑更新代码以包含事件发射。这仅在最新的 WebKit/BLINK 和 FireFox 中进行了测试。对于 IE 和旧版浏览器，您可能需要备用。

Updated fiddle

编辑 2
您也许应该考虑另一种解决方案，例如像这样：

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 不是form 的孩子：？
@php_nub_qq 我以为你想阻止document.getElementById('form').submit(); 提交表单？
哦，对不起，现在我知道你做了什么。这是一个好主意，但不幸的是无法实现，因为我不能取消form.submit() 的默认行为。例如，如果我这样做了，那么调用 form.submit() 不会触发提交侦听器
@php_nub_qq 正如您在小提琴中看到的那样，仍然调用了偶数侦听器，如果您删除侦听器中的 e.preventDefault()，表单仍将被提交。这只是防止直接document.getElementById('form').submit() 调用。
@php_nub_qq 更新了代码以发出事件。但您最好使用类似于我添加到 EDIT 2 的代码的方法

【解决方案2】：

document.getElementById('submit').onclick = function () {
  document.getElementById('form').submit(function(e) {
    alert( "Handler for .submit() called." );
    e.preventDefault();
  });
}

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

http://api.jquery.com/submit/

【讨论】：

不是按钮的问题，我可以从任何地方拨打.submit()
这正是我正在做的？另外我没有使用 jquery