阻止冒泡事件導致document上的點擊事件不能觸發的問題解決

如下圖需求是在點擊除了按鈕1之外的其他的地方，彈窗隱藏。

開始是如下代碼這樣寫的

$(document).click(function (e) {
        var dis = $(".admin-exam-list").css('display')
        console.log(e.target)
        var isClickExam = $(e.target).parents('#adminExam').length
        if(dis==='block' && (!isClickExam)) {
            $(".admin-exam-list").hide(); // 隱藏
        }
})

產生問題：再點擊按鈕2的時候彈窗不消失，發現按鈕2的點擊事件中寫了阻止事件冒泡e.stopPropagation()，導致$(document).click不會被觸發

 由於像2按鈕這樣的元素很多，不適合在每個點擊事件中都調用彈窗關閉的代碼

分析：$(document).click不會被觸發是由於事件流（簡單描述如下圖）原因，所以考慮是不是可以通過改變事件執行順序解決這個問題。也就是把冒泡變為捕獲，那么想到了 addEventListener() 這個方法它的第三個參數（具體用法自行百度），最后解決問題方法入下代碼：

 

    document.addEventListener("click", function(e){
        var dis = $(".admin-exam-list").css('display')
        console.log(e.target)
        var isClickExam = $(e.target).parents('#adminExam').length
        if(dis==='block' && (!isClickExam)) {
            $(".admin-exam-list").hide(); // 隱藏
        }
    },true);

這樣就會先執行addEventListener綁定的click方法，后執行按鈕2的點擊事件，問題完美解決