点击按钮时事件监听器无法稳定触发跟踪事件与表单提交的问题

你遇到的核心问题很明确：跟踪事件大概率是异步操作（比如发送统计请求），但表单提交是同步的——页面跳转/刷新会直接中断未完成的异步请求，所以才会出现“表单总能提交，但跟踪偶尔失效”的情况。下面给你几个靠谱的解决方案：

方案1：使用navigator.sendBeacon()（最推荐） #

这个API是浏览器专门为「页面卸载前发送统计数据」设计的，它能异步发送请求且不会阻塞页面卸载，哪怕页面马上跳转，请求也能正常完成。

如果你的tracking.track()内部是用XHR/fetch发送请求，可以改成用beacon实现：

var executeTracking = function(){
  // 替换成你的统计数据和接口地址
  const trackingData = { event: 'form_submit', button_id: 'btn_01' };
  navigator.sendBeacon('/your-tracking-api', JSON.stringify(trackingData));
}

var buttons = document.getElementsByClassName('form-submit-button');
buttons[0].addEventListener('click', function(e){
  executeTracking();
  // 这里正常提交表单即可，beacon会自行保证请求完成
  submitForm();
});

方案2：让跟踪方法返回Promise，等待完成后再提交表单 #

如果能修改tracking.track()的实现，让它返回Promise，我们就可以确保跟踪请求完成后再提交表单：

// 先改造executeTracking，让它返回Promise
var executeTracking = function(){
  return new Promise((resolve) => {
    // 假设原tracking.track()支持回调函数
    tracking.track(() => {
      resolve();
    });
    // 如果是用fetch/XHR，直接返回对应Promise即可
    // return fetch('/tracking-api', { method: 'POST', body: JSON.stringify(data) });
  });
}

var buttons = document.getElementsByClassName('form-submit-button');
buttons[0].addEventListener('click', async function(e){
  e.preventDefault(); // 先阻止默认的表单提交行为
  await executeTracking(); // 等待跟踪请求完成
  submitForm(); // 再手动提交表单
});

方案3：延迟表单提交（备选，不太推荐） #

如果完全无法修改tracking.track()，可以给表单提交加一个短暂延迟，给跟踪请求留出时间——但这种方法依赖网络速度，可靠性稍差：

var buttons = document.getElementsByClassName('form-submit-button');
buttons[0].addEventListener('click', function(e){
  e.preventDefault();
  executeTracking();
  // 延迟300ms提交，给跟踪请求留足时间（可根据实际情况调整）
  setTimeout(() => {
    submitForm();
  }, 300);
});

内容的提问来源于stack exchange，提问作者jj1111