js，判断点击冒泡事件结束，判断点击的位置在元素外部

今天想做一个功能，当我点击某个框外部时使框的颜色改变达到看上去未选中的效果。我的思路是通过冒泡事件来判断该元素是否在所有冒泡的元素内，此时就需要知道一轮冒泡事件何时结束才能判断。

由于点击的冒泡事件是从上往下，由内到外的，所以其实只需要在body身上添加点击事件，将body作为冒泡的最底层就能达到这个效果。

eles = document.querySelectorAll("*")
body = document.querySelector("body")         //获取底层元素
target = document.querySelector("#target")    //获取目标元素

judge = []                                    //闭包判断一次冒泡所涉及的元素

for (i=0; i<eles.length; i++) {
    eles[i].onclick = function(ev) {
        judge.push(this)                      //将冒泡过的元素加入列表
    }
}
body.onclick = function () {
    if (!judge.includes(target)) {            //判断目标元素是否在列表内
        console.log("在目标元素外")
    } else {
        console.log("在目标元素内")
    }
    judge.splice(0, judge.length)             //一轮冒泡结束，清空冒泡元素的列表
}

可能这个功能还有别的实现办法，但是判断冒泡结束的目的达到了