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 之外。