Javascript 跟踪表格提交

我正在开发跟踪脚本，它跟踪一些事件（页面视图、链接单击、自定义等），并将它们发送到API。问题是我有点被表单提交卡住了。到目前为止我有以下几点

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

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

Helper.sendEvent

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

表单提交已取消，因为表单未连接

在这种情况下，

evt.preventDefault（）

无法按预期工作。有人知道如何实现这一点吗

---

我必须澄清上述声明：

evt.preventDefault

由Redux表单库调用，因此您必须通过函数处理

onSubmit

（将数据发送到某处+重定向）。我猜在其他单页应用程序中也是如此，没有

操作

将用户发送到哪里。。。默认表单行为最初被阻止。

首先，确保在为每个表单设置事件侦听器的

for

循环之前定义了ES6 arrow函数

trackFormSubmit

。这可能会导致代码正常工作，但不会侦听表单提交

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

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

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

此外，我还将事件侦听器的设置方式更改为

forEach

方式。这是更可读的

---

希望这至少能让您了解它的工作原理。

检查

事件的值。isDefaultPrevented

解决了问题：-）

为什么需要

preventDefault

呢？如果您只想跟踪提交，则不必使用

preventDefault

。@最后面的是，如果您有非SPA网站，您可能会被重定向到另一个页面，而没有

preventDefault

则无法保证执行事件提交，还是我错了？我尝试在

setInterval

中以500毫秒的延迟发送事件，但未执行。不确定是否有帮助，但我会侦听文档本身的提交事件。这样，您还可以捕获动态创建的表单。您可以有一个React tracking组件来包装整个应用程序。@最后，我发现我真的不需要

preventDefault

。我已经将

setTimeout

设置为我的api响应，它可以正常工作。。。javascript总是让我惊讶：）我以为api调用会被终止。谢谢；）@最后的呵呵，我的坏。。。即使它成功地将事件写入db-

TypeError:Failed to fetch

：-D damn（尝试解决非单页应用程序）它也会抛出错误捕获表单提交事件，但阻止默认表单提交没有问题。我发布了一个工作事件侦听器阻止每个默认表单提交的示例。例如，它在Redux表单中已经被阻止，因此在提交后您不会被重定向到某个页面，您必须在

onSubmit

code中自行处理此问题。您的代码在任何重要部分都没有不同，我的代码几乎相同。我还首先定义了

trackFormSubmit

。

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