javascript - 失去焦点时提交表单

Question

我有一个动态创建的表单，它附加了一个提交事件监听器，因此我可以执行一些 ajax 请求来保存数据。

但是我也想在失去焦点的时候提交。

我调用了 form.submit() 但之前创建的事件监听器被忽略了。

form.addEventListener('submit', function (event_handler) {
    event_handler.preventDefault();
    /* some code */
});

// if loses focus
form.addEventListener('blur', function (event) {
   form.submit(); // submits, but ignores the defined eventListener so the preventDefault() is ignored.
   return false;
}, true);

我原以为 form.submit() 会运行提交监听器中定义的代码。

任何解决这个问题的方法。

没有 jQuery 或任何其他框架。只是 Vanilla js。

Answer 1

确实有问题。当您调用 JavaScript form.submit() 时，它有时会覆盖事件监听器。简单的解决方案就是调用提交程序函数并调用它。

 function runBeforeSubmit()
 {
     /* some code */
 }


 form.addEventListener('submit', function (event_handler) {
    event_handler.preventDefault();
    runBeforeSubmit(); <------------------------ shared code to process before submit
 });

 // if loses focus
 form.addEventListener('blur', function (event) {
   runBeforeSubmit(); <------------------------ shared code to process before submit
   form.submit();
   return false;
}, true);