TypeScript开发React应用如何创建后于其他handler运行的全局点击handler？

核心原理 #

DOM事件处理的同步代码优先级永远高于异步宏任务，利用这个特性可以完全规避事件注册顺序、事件流阶段带来的优先级问题，无需关心其他团队handler的注册时机和挂载位置。 #

具体实现代码（TypeScript） #

// 可以在应用入口最早期执行这段注册逻辑，无需关心注册顺序
window.addEventListener('click', (e: MouseEvent) => {
  // 将逻辑推入宏任务队列，所有同步执行的点击handler（包括React合成事件、其他原生DOM事件handler）都会先执行完成
  setTimeout(() => {
    // 这里写入你的全局handler逻辑
    // 示例：判断点击是否发生在React应用内部
    const reactRoot = document.getElementById('root') as HTMLElement;
    if (reactRoot.contains(e.target as Node)) {
      console.log('所有其他点击handler执行完成后触发的全局逻辑');
    }
  }, 0);
}, false);

方案优势 #

• 完全在React外部实现，不侵入现有React业务代码
• 无需调整事件监听的阶段、无需保证注册顺序，无论其他团队的handler是React合成事件还是原生DOM事件，同步逻辑都会优先执行
• 不受stopPropagation调用影响，哪怕其他handler阻止了事件冒泡，你的异步逻辑依然会正常触发

特殊场景适配 #

如果存在其他handler也使用了setTimeout 0写入后置逻辑，你可以通过调整超时时间实现优先级兜底，比如将超时时间设为1ms，即可保证你的逻辑晚于所有0延迟的异步逻辑执行。 #

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