綁定點擊事件，當點擊事件裏依賴異步返回結果則阻止冒泡失效

背景

在開發過程當中，明明調試好的阻止冒泡沒有問題，可是真正使用 時候發現阻止冒泡失效了，原來緣由是點擊事件裏依賴了異步返回結果。

正常阻止冒泡寫法

<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是一個上報方法，這裏要等待上報完成以後再執行點擊邏輯，會致使阻止冒泡失效。