在弹框区域外点击,关闭弹框

思路

弹框最外层套个id,监听文档点击事件,循环查找父级id,判断是否包含在外层id中,包含不处理,不包含弹窗关闭

注意点

具体问题具体分析,如html层级解构混乱时,需加入额外判断来处理,但整体思想不变
例子,vue中使用
 document.addEventListener("click", e => {
      if (!this.overMark && this.showArrow) {
        let el = e.target;
        while (el) {
          if (el.id == "menu-box") {
            return;
          }
          el = el.parentNode;
        }
        this.showArrow = false;
      }
    });
上文代码中this.overMarkthis.showArrow就是一个额外判断,满足条件时才去循环查找父级id,直至匹配
posted @ 2021-04-07 09:46  萝卜爱吃肉  阅读(222)  评论(0编辑  收藏  举报