HTML

Question

准备了此演示

正如您所看到的，当您尝试通过输入提交表单时，它会停止，但是当您单击表单提交的按钮时。如何在不覆盖函数的默认行为的情况下阻止表单在调用.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和旧版浏览器，您可能需要回退。

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

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/

停止从javascript提交表单

HTML

JS

2 个答案: