停止从javascript提交表单

Question

我已经为问题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();
}

Answer 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和更旧的浏览器，您可能需要一个退路。

更新小提琴

编辑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函数的真实事件的行为的类。

Answer 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/