JavaScript决定异步计算后调用stopPropagation

时间:2019-06-11 14:15:25

标签: javascript async-await

存在HTML元素的容器组件结构。容器元素具有附加的click处理函数。此处理程序的动作足以满足大多数内容的需求。但是某些组件具有自己的click处理程序和更具体的条件行为。在某些情况下,该事件不应传播到组件外部,也就是说,将阻止容器对此类click事件做出反应。

很容易阻止事件同步冒泡。

是否可以推迟决策,直到完成一些长时间的异步计算?

component.addEventListener(
    "click",
    (e)=>{
        // this is OK, but conditions are not known yet
        if(flag) {
            e.stopPropagation();
        }
        setTimeout(
           ()=>compute(), 
           1500,
        );
    },
)

是否可以推迟是否在计算完成后停止事件传播的决定。

(e)=>{
    setTimeout(
       ()=>{ 
           flag = compute(), 
           if(flag) {
               // this will not work as expected
               e.stopPropagation();
            }
       },
       1500,
    );
}

在组件的父元素或event.target.parentElement上使用HTMLElement :: click()的推荐解决方案是什么?

(e)=>{
    e.stopPropagation();        
    setTimeout( 
       ()=>{
           const flag = compute();
           if(!flag){
               component.parentElement.click();
               // e.target.parentElement.click();
           }
       }, 
       1500,
    );
}

有更好的方法吗?

0 个答案:

没有答案