欢迎光临
我的个人博客网站

绑定点击事件,当点击事件里依赖异步返回结果则阻止冒泡失效

背景

在开发过程中,明明调试好的阻止冒泡没有问题,但是真正使用 时候发现阻止冒泡失效了,原来原因是点击事件里依赖了异步返回结果。

正常阻止冒泡写法

<div class="aa notice">     <div class="bb notice"></div> </div> <script>     var arr = document.getElementsByClassName("notice");     for(let i of arr){         i.addEventListener("click",function (e) {             console.log("i",i)             // 阻止冒泡             const ev = e || window.event;             if (ev && ev.stopPropagation) {                 //非IE浏览器                 ev.stopPropagation();             } else {                 //IE浏览器(IE11以下)                 ev.cancelBubble = true;             }         })     } </script>

阻止冒泡失效的场景:

<div class="aa notice">     <div class="bb notice"></div> </div> <script>     var arr = document.getElementsByClassName("notice");     for(let i of arr){         i.addEventListener("click",function (e) {             console.log("i",i)             doReport(reportList, timeout).then(() => {                 // 阻止冒泡                 const ev = e || window.event;                 if (ev && ev.stopPropagation) {                    //非IE浏览器                    ev.stopPropagation();                 } else {                    //IE浏览器(IE11以下)                    ev.cancelBubble = true;                 }             })         })     } </script>

doReport是一个上报方法,这里要等待上报完成之后再执行点击逻辑,会导致阻止冒泡失效。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 绑定点击事件,当点击事件里依赖异步返回结果则阻止冒泡失效
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏