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

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

 1     function fnEnumParentNodes(currNode, givenClassName) {
 2         if (!currNode || !givenClassName) {//currNode 是当前点击的元素,givenClassName是基准类名(我们想去筛选是否有这个类名)
 3             return false;
 4         };
 5         let parentNode, flag = false;
 6         while (parentNode = currNode.parentNode || currNode.parentElement) {
 7             let classArr = parentNode.classList && Array.from(parentNode.classList);
 8             if (classArr && classArr.includes(givenClassName)) {
 9                 flag = true;
10                 break;
11             }
12             currNode = parentNode;
13         }
14         return flag;
15     }

遇到的问题:

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

原因:

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

修改如下:

 1      function fnEnumParentNodes(currNode, givenClassName) {
 2         if (!currNode || !givenClassName) {
 3             return false;
 4         };
 5         let flag = false;
 6         while (currNode) {//这里是修改逻辑点!!!
 7             let classArr = currNode.classList && Array.from(currNode.classList);
 8             if (classArr && classArr.includes(givenClassName)) {
 9                 flag = true;
10                 break;
11             }
12             currNode = currNode.parentNode || currNode.parentElement;
13         }
14         return flag;
15     }

问题就解决啦。

原文地址:https://www.cnblogs.com/huoerheaven/p/13444804.html