頁面彈出一個彈框后 點擊除彈框外的其他地方 讓彈框消失

封裝的一個方法：點擊當前元素，逐級篩選其父元素是否包含某個類，如果有包含，返回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;
    }

問題就解決啦。