Question

我正在开发跟踪脚本，该脚本可以跟踪一些事件（页面浏览，链接点击，自定义...）并将其发送到API。问题是我对表单提交有点坚持。到目前为止，我一直在关注...

首先，我将事件侦听器添加到页面上的每个表单中：

const forms = document.getElementsByTagName("form");
  for (let i = 0; i < forms.length; i++) {
    forms[i].addEventListener("submit", trackFormSubmit);
  }
}

然后 trackFormSubmit 函数：

const trackFormSubmit = function(evt) {
  if (evt.preventDefault) {
    evt.preventDefault();
  }
  const form = evt.target || evt.srcElement;
  const formElements = form.elements;

  // parse form data payload here, not important to show
  const event = {
    ...
  };

  Helper.sendEvent(event)
    .then(() => {
      form.submit();
    })
    .catch(error => {
      console.log(error);
      form.submit();
    });
};

Helper.sendEvent函数将事件发送到API。此解决方案适用于非SPA网站，但不适用于SPA。我已经在React中使用Redux表单库对表单进行了测试-成功跟踪了表单提交，但收到控制台错误：

由于未连接表单而取消了表单提交

在这种情况下，evt.preventDefault()无法正常工作。有人知道如何实现吗？

好，我必须澄清上面的声明： evt.preventDefault由Redux Form库调用，因此您必须通过函数处理onSubmit（将数据发送到某处+重定向）。我猜在其他单页应用程序中也是一样，没有action发送用户的地方……最初阻止了默认的表单行为。

Answer 1

首先，请确保在trackFormSubmit循环（将事件侦听器设置为每种形式）的循环之前定义了ES6箭头函数for。这可能会导致代码正常工作，但不听表单提交。

这里是为文档中的每个表单设置事件侦听器并处理其提交的示例。

const trackFormSubmit = function(event) {
  event.preventDefault();
  const form = event.target || event.srcElement;
  const formElements = form.elements;  
  alert(`Form ${event.target.name} was submited.`);
};


const forms = document.querySelectorAll("form");
forms.forEach(f=>{
  f.addEventListener("submit",trackFormSubmit);
});

这是一个小提琴，因此您可以查看此代码的工作方式：

https://jsfiddle.net/k3llydev/fgL5owdj/

此外，我将设置事件侦听器的方式更改为forEach。更具可读性。

希望这至少可以让您了解其工作原理。

Answer 2

检查event.isDefaultPrevented的值已解决问题:-)

跟踪表格提交

2 个答案: