clickoutside 代码实现

clickoutside

原理就是，监听click事件，获取dom的元素，与弹出的元素和触发的元素对比（使用contains方对比），如果是子元素就返回false，否则就执行callback函数
Node.contains()返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。
最后不使用时需要销毁，需要调用removeEventListener

clickOutSide(
         /*绑定的元素*/
        document.getElementById("h1"),
        /*弹出的元素*/
        document.getElementById("pop"),
        /*执行回调*/
        function (e) {
          console.log("callback", e);
        }
      );

      function clickOutSide(el, popItem, callback) {
        document.addEventListener("click", function (e) {
          let elements = e.path;
          //如果是弹出元素
          if (isPop(elements, popItem) || el.contains(e.target)) {
            return;
          } else {
            callback(e);
          }
        });
      }

      function isPop(elements, popItem) {
        if (elements && elements.length > 0 && popItem) {
          for (let i = 0; i < elements.length; i++) {
            try {
              //表示肯定是popItem的父元素
              if (elements[i].contains(popItem)) {
                return false;
              }
              if (popItem.contains(elements[i])) {
                return true;
              }
            } catch (e) {
              return false;
            }
          }
        }
        return false;
      }