react e.stopPropagation() 前调用 await 耗时操作 的坑

代码如下

<div
  onClick={e=>{
    e.stopPropagation();

  }}
/>

这样是能阻止冒泡的 ，e.stopPropagation(); 能正常 执行

但是下面 这样写 是不行的

<div
  onClick={async (e)=>{

  let res = await xxx(); //处理耗时操作
  if (res.success){
    e.stopPropagation(); // 这个永远都不会走 ，并且不会组织事件冒泡 
  }
  }}
/>

原因

preventDefault 需要同步调用才能产生任何效果。即使没有 React 也是如此。这是浏览器/DOM 级别的行为。

事件系统是同步的，preventDefault必须同步调用，即使在 React 之外。

参考来源 https://github.com/facebook/react/issues/9319