如何确保页面跳转前被点击DOM节点的所有onclick事件全部执行完毕

方案实现思路 #

核心逻辑绕开事件冒泡限制，从事件捕获阶段和全局跳转行为拦截两层处理，兼容所有前端框架场景：

1. 优先用捕获阶段绑定事件，规避冒泡拦截影响
   所有前端框架阻止冒泡的逻辑只会阻断事件冒泡阶段的向上传递，不会影响从window向下传递到目标节点的捕获阶段，在捕获阶段绑定的全局click事件可以100%触发，不受框架逻辑影响。
   参考实现代码：

   // content.js中写入，第三个参数为true表示启用捕获模式
   window.addEventListener('click', async (e) => {
     const clickTarget = e.target;
     // 先执行扩展侧自定义逻辑
     await runExtensionLogic(clickTarget);
   
     // 拦截普通<a>标签跳转
     const jumpLink = clickTarget.closest('a');
     if (jumpLink?.href && !jumpLink.target?.startsWith('_blank') && !jumpLink.download) {
       // 阻止默认跳转，等所有逻辑执行完再手动跳转
       e.preventDefault();
       // 执行目标节点绑定的原有click事件
       if (typeof jumpLink.onclick === 'function') {
         jumpLink.onclick(e);
       }
       // 异步逻辑全部执行完成后跳转
       window.location.href = jumpLink.href;
     }
   }, true);
   

2. 兼容单页应用路由跳转场景
   现代前端框架大多用前端路由实现页面跳转，不会触发页面刷新，需要额外拦截history方法捕获跳转行为：
   参考实现代码：

   // 重写history的两个跳转方法
   const rawPushState = window.history.pushState;
   const rawReplaceState = window.history.replaceState;
   
   window.history.pushState = function (...args) {
     // 跳转前执行扩展逻辑
     runExtensionLogic();
     return rawPushState.apply(this, args);
   };
   
   window.history.replaceState = function (...args) {
     runExtensionLogic();
     return rawReplaceState.apply(this, args);
   };
   
   // 监听浏览器前进后退的popstate事件
   window.addEventListener('popstate', () => {
     runExtensionLogic();
   });
   

3. 异步逻辑处理注意事项
   所有需要保证执行完成的逻辑请封装为Promise形式，用async/await等待执行完成后再触发跳转，避免出现逻辑未执行完页面就切换的情况。如果不确定目标节点绑定的事件执行时长，可以加setTimeout(() => { 跳转逻辑 }, 0)，等待当前事件循环内所有同步、微任务执行完成后再跳转。

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