嵌入型表单提交事件监听器在存在其他监听器的网站上无法触发的解决方案咨询

嘿，我完全懂你碰到的麻烦——宿主网站提前给表单绑了submit监听器（比如验证码校验这类逻辑），导致你的监听器要么被拦截，要么轮不到执行。下面给你几个实用的解决思路，你可以挨个试试：

1. 切换到捕获阶段触发监听器 #

默认的addEventListener是在冒泡阶段执行的，如果宿主的监听器先触发并调用了event.stopPropagation()，你的监听器就收不到事件了。这时候把你的监听器放在捕获阶段执行，就能抢在宿主的冒泡监听器前面触发：

form.addEventListener('submit', handleSubmit, { capture: true });

注意：如果你的逻辑依赖宿主监听器的处理结果（比如验证码验证通过），可以在捕获阶段只做数据记录，不着急阻止默认行为，等后续再处理。

2. 绕过event.preventDefault()的拦截 #

有些宿主监听器会直接调用event.preventDefault()阻止表单提交，这时候即使你的监听器触发了，表单也不会正常提交。你可以在自己的逻辑里灵活处理：

const handleSubmit = async (event) => {
  // 先保存宿主是否已经阻止了默认行为
  const wasPrevented = event.defaultPrevented;
  
  // 如果宿主没阻止，我们先拦截，执行自己的API调用
  if (!wasPrevented) {
    event.preventDefault();
  }
  
  // 执行你的API逻辑
  const formData = new FormData(event.target);
  await fetch('你的API地址', {
    method: 'POST',
    body: formData
  });
  
  // 如果宿主原本没阻止提交，执行完API后手动触发表单提交
  if (!wasPrevented) {
    event.target.submit();
  }
};

这里要提一句：手动调用form.submit()不会触发submit事件，所以不用担心循环触发的问题。

3. 重写表单原生的submit方法（终极兜底） #

如果上面的方法都不管用，直接重写表单的submit方法是最稳妥的——不管用户点击提交按钮，还是宿主脚本调用form.submit()，你的逻辑都会被执行：

const addEventListenersToForms = () => {
  const forms = document.querySelectorAll("form");
  
  forms.forEach((form) => {
    if (!form.dataset.listenerAdded) {
      // 保存原始的submit方法
      const originalSubmit = form.submit;
      
      // 重写submit方法
      form.submit = async function() {
        // 模拟一个事件对象传入handleSubmit
        await handleSubmit({
          target: this,
          defaultPrevented: false,
          preventDefault: () => {} // 手动调用submit时不需要实际阻止
        });
        
        // 调用原始的submit方法完成提交
        originalSubmit.call(this);
      };
      
      // 同时保留捕获阶段的监听器，处理用户点击提交按钮的场景
      form.addEventListener('submit', handleSubmit, { capture: true });
      form.dataset.listenerAdded = 'true';
    }
  });
};

4. 处理动态加载的表单 #

很多网站会通过JS动态添加表单，这时候可以用MutationObserver监听DOM变化，自动给新表单绑定监听器：

// 监听DOM变化的观察者
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      // 检查新增节点里的表单
      const addedForms = Array.from(mutation.addedNodes).flatMap(node => {
        if (node.tagName === 'FORM') return [node];
        return node.querySelector ? Array.from(node.querySelectorAll('form')) : [];
      });
      
      addedForms.forEach(addSingleFormListener);
    }
  });
});

// 监听整个页面的DOM变化
observer.observe(document.body, { childList: true, subtree: true });

// 单独给一个表单绑定监听器的工具函数
function addSingleFormListener(form) {
  if (!form.dataset.listenerAdded) {
    form.addEventListener('submit', handleSubmit, { capture: true });
    const originalSubmit = form.submit;
    form.submit = async function() {
      await handleSubmit({ target: this, defaultPrevented: false, preventDefault: () => {} });
      originalSubmit.call(this);
    };
    form.dataset.listenerAdded = 'true';
  }
}

// 初始化页面已有的表单
addEventListenersToForms();

针对你提到的验证码场景，这类脚本一般会在验证通过后才允许表单提交，上面的“捕获阶段监听+重写submit方法”组合完全能覆盖——不管验证码脚本是触发submit事件还是直接调用form.submit()，你的逻辑都会被执行到。

备注：内容来源于stack exchange，提问作者user23453720