页面弹出一个弹框后 点击除弹框外的其他地方 让弹框消失

封装的一个方法：点击当前元素，逐级筛选其父元素是否包含某个类，如果有包含，返回true，如果没有包含，返回false；

    function fnEnumParentNodes(currNode, givenClassName) {
        if (!currNode || !givenClassName) {//currNode 是当前点击的元素，givenClassName是基准类名（我们想去筛选是否有这个类名）
            return false;
        };
        let parentNode, flag = false;
        while (parentNode = currNode.parentNode || currNode.parentElement) {
            let classArr = parentNode.classList && Array.from(parentNode.classList);
            if (classArr && classArr.includes(givenClassName)) {
                flag = true;
                break;
            }
            currNode = parentNode;
        }
        return flag;
    }

 

遇到的问题：

    当选中这个弹框的内容时，弹框消失了。（本应该点击弹框以外的地方，弹框消失，但是鼠标选中弹框内容，触发了点击事件，并且e.target是弹框最外层的元素）。

原因：

    封装的方法有点问题。while语句中判断的是当前元素的父元素，并逐级递增，忽略了当前元素本身。

修改如下：

     function fnEnumParentNodes(currNode, givenClassName) {
        if (!currNode || !givenClassName) {
            return false;
        };
        let flag = false;
        while (currNode) {//这里是修改逻辑点！！！
            let classArr = currNode.classList && Array.from(currNode.classList);
            if (classArr && classArr.includes(givenClassName)) {
                flag = true;
                break;
            }
            currNode = currNode.parentNode || currNode.parentElement;
        }
        return flag;
    }

问题就解决啦。