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


    封装的一个方法:点击当前元素,逐级筛选其父元素是否包含某个类,如果有包含,返回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     }

    问题就解决啦。

  • 相关阅读:
    Top的VIRT是什么
    python的日志logging模块性能以及多进程
    Python的多进程锁的使用
    extjs动态导入
    初识Dubbo 系列之5-Dubbo 成熟度
    POJ 2151 Check the difficulty of problems(概率dp)
    自考
    疯狂Java学习笔记(70)-----------挚爱Java
    2014年辛星解读css第三节
    atitit。流程图的设计与制作 attilax 总结
  • 原文地址:https://www.cnblogs.com/huoerheaven/p/13444804.html
Copyright © 2020-2023  润新知