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

思路

弹框最外层套个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.overMark跟this.showArrow就是一个额外判断，满足条件时才去循环查找父级id，直至匹配

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

原文：https://www.cnblogs.com/ybchen292/p/14626379.html