zoukankan      html  css  js  c++  java
  • 页面弹出一个弹框后 点击除弹框外的其他地方 让弹框消失

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

    问题就解决啦。

  • 相关阅读:
    vs2015驱动开发中使用RtlStringCchPrintfW()报错
    windbg双机调试配置
    修改Windows默认调试器
    kong配置service和route实现简单API代理
    konga的初步使用
    Kong Admin API — 核心对象
    Kong的API管理方式
    kong的管理UI选择-konga
    Kong 安装
    关于kong | API Gateway
  • 原文地址:https://www.cnblogs.com/huoerheaven/p/13444804.html
Copyright © 2011-2022 走看看