常用方法

// 兼容性封装
(function () {
  function getScrollOffset() {
    // 获取滚动距离
    if (window.pageXoffSet) {
      return {
        left: window.pageXOffSet,
        top: window.pageYOffSet,
      };
    } else {
      return {
        left: document.body.scrollLeft + document.documentElement.scrollLeft,
        top: document.body.scrollTop + document.documentElement.scrollTop,
      };
    }
  }
  function getViewportSize() {
    // 获取浏览器可视距离尺寸
    if (window.innerWidth) {
      return {
        width: window.innerWidth,
        height: window.innerHeight,
      };
    } else {
      if (document.compatMode === "BackCompat") {
        // 如果浏览器模式是怪异模式
        return {
          width: document.body.clientWidth,
          height: document.body.clientHeight,
        };
      } else {
        return {
          width: document.doucmentElement.clientWidth,
          height: document.documentELement.clientHeight,
        };
      }
    }
  }
  function getScrollSize() {
    // 获取整个文档高度
    if (document.body.scrollWidth) {
      return {
        width: document.body.scrollWidth,
        height: document.body.scrollHeight,
      };
    } else {
      return {
        width: document.documentElement.scrollWidth,
        height: document.documentElement.scrollHeight,
      };
    }
  }

  function getElemDocPosition(el) {
    // 获取盒子到文档边缘的距离
    let parent = el.offsetParent,
      offsetLeft = el.offsetLeft,
      offsetTop = el.offsetTop;

    while (parent) {
      offsetLeft += parent.offsetLeft;
      offsetTop += parent.offsetTop;
      parent = parent.offsetParent;
    }
    return {
      left: offsetLeft,
      top: offsetTop,
    };
  }

  function addEvent(el, type, fn) {
    // 绑定事件
    if (el.addEventListener) {
      el.addEventListener(type, fn, false);
    } else if (el.attachEvent) {
      el.attachEvent("on" + type, fn.bind(el));
    } else {
      el["on" + type] = fn;
    }
  }

  function removeEvent(el, type, fn) {
    // 解除绑定
    if (el.addEventListener) {
      el.removeEventListener(type, fn, false);
    } else if (el.attachEvent) {
      el.detachEvent("on" + type, fn);
    } else {
      el["on" + type] = null;
    }
  }

  function cancelBubbleEvent(ev) {
    // 阻止冒泡
    const e = ev || window.event;
    if (e.stopPropagation) {
      e.stopPropagation();
    } else {
      e.cancelBubble = true;
    }
  }

  function preventDefaultEvent(ev) {
    const e = ev || window.event;
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
  }

  function getStyles(elem, prop) {
    // 获取dom元素属性
    if (window.getComputedStyle) {
      if (prop) {
        return window.getComputedStyle(elem, null)[prop];
      } else {
        return window.getComputedStyle(elem, null);
      }
    } else {
      if (prop) {
        return elem.currentStyle[prop];
      } else {
        return elem.currentStyle;
      }
    }
  }

  function pagePos(e) {
    // 获取事件源位置距文档边缘的距离
    let scrollLeft = getScrollOffset().left; //获取滚动距离
    let scrollTop = getScrollOffset().top;
    let cLeft = document.documentElement.clientLeft || 0; // 文档偏移
    let cTop = document.documentElement.clientTop || 0; // 文档偏移
    return {
      X: e.clientX + scrollLeft - cLeft,
      Y: e.clientY + scrollTop - cTop,
    };
  }

  window.utils = {
    getScrollOffset,
    getViewportSize,
    getScrollSize,
    getElemDocPosition,
    addEvent,
    removeEvent,
    cancelBubbleEvent,
    preventDefaultEvent,
    pagePos,
    getStyles,
  };

  Element.prototype.eleChildren = function (num = null) {
    // childNodes封装获取元素节点
    let childrenNode = this.childNodes;
    let elementNode = {
      // splice: Array.prototype.splice,
      push: Array.prototype.push,
      length: 0,
    };

    for (let i = 0; i < childrenNode.length; i++) {
      let tempNode = childrenNode[i];
      if (tempNode.nodeType === 1) {
        elementNode.push(tempNode);
      }
    }
    return num ? elementNode[num] : elementNode;
  };
  Element.prototype.dragClick = function (menuDom = null) {
    // 拖拽点击双击事件
    const _self = this;
    let startTime = 0;
    let endTime = 0;
    let timer = null; //定时器
    let clickCounter = 0;
    let dbClickBTime = 0;
    let dbClickETime = 0;
    const clientWidth = getViewportSize().width;
    const clientHeight = getViewportSize().height;
    const eleWidth = parseInt(getStyles(_self, "width"));
    const eleHeight = parseInt(getStyles(_self, "height"));
    let orgPos = [];
    let x, y;

    addEvent(_self, "mousedown", function (ev) {
      startTime = new Date().getTime();
      let e = ev || window.event;
      const btnCode = e.button; //0左键 1中键 2右键
      if (btnCode === 0) {
        orgPos = [
          parseInt(getStyles(_self).left),
          parseInt(getStyles(_self).top),
        ];
        x = pagePos(e).X - parseInt(getStyles(_self, "left"));
        y = pagePos(e).Y - parseInt(getStyles(_self, "top"));
        addEvent(document, "mousemove", mouseMove);
        addEvent(document, "mouseup", mouseUp);
      } else if (btnCode === 2) {
        console.log("右键");
        if (menuDom) {
          menuDom.style.left = pagePos(e).X + "px";
          menuDom.style.top = pagePos(e).Y + "px";
          menuDom.style.display = "block";
        }
      }

      cancelBubbleEvent(e);
      preventDefaultEvent(e);
    });

    addEvent(document, "contextmenu", function (ev) {
      const e = ev || window.event;
      preventDefaultEvent(e);
    });
    if (menuDom) {
      addEvent(menuDom, "click", function (ev) {
        const e = ev || window.event;
        cancelBubbleEvent(e);
      });
      addEvent(document, "click", function () {
        menuDom.style.display = "none";
      });
    }

    function mouseMove(ev) {
      let e = ev || window.event;
      let newLeft = pagePos(e).X - x;
      let newTop = pagePos(e).Y - y;
      newLeft =
        newLeft < 0
          ? 0
          : newLeft > clientWidth - eleWidth
          ? clientWidth - eleWidth - 1 //有的浏览器有误差会出现滚动条所以多减去1
          : newLeft;
      newTop =
        newTop < 0
          ? 0
          : newTop > clientHeight - eleHeight
          ? clientHeight - eleHeight - 1
          : newTop;

      _self.style.left = newLeft + "px";
      _self.style.top = newTop + "px";
    }
    function mouseUp(ev) {
      endTime = new Date().getTime();
      if (endTime - startTime < 100) {
        // 如果是点击就复位
        console.log("is click");
        _self.style.left = orgPos[0] + "px";
        _self.style.top = orgPos[1] + "px";

        clickCounter++;
        if (clickCounter === 1) {
          dbClickBTime = new Date().getTime();
        }
        if (clickCounter === 2) {
          dbClickETime = new Date().getTime();
        }
        if (dbClickBTime && dbClickETime && dbClickETime - dbClickBTime < 200) {
          console.log("双击了");
        }
        timer = setTimeout(() => {
          clickCounter = 0;
          dbClickBTime = 0;
          dbClickETime = 0;
          clearTimeout(timer);
        }, 200);
      }
      removeEvent(document, "mousemove", mouseMove);
      removeEvent(document, "mouseup", mouseUp);
    }
  };
})();