工具类utils.js

utils.js

//最好别在封装的方法里面打印消息，如果打印，可能打印的消息太多了，混淆
function getScrollOffset() {
  //返回滚动条滚动的距离,如果没有滚动就是0
  if (window.pageXOffset) {
    //新的api支持，如果不存在走旧的api
    return {
      left: window.pageXOffset,//x偏移的距离
      top: window.pageYOffset,//y偏移的距离
    };
  } else {
    /*旧的api,分为标准模式，怪异模式，因为必有一方恒定为0，另一方不为0，
        为正常正确的值，所以可以不用判断2次，直接相加就行了，返回正常正确的值
        */
    return {
      left: document.body.scrollLeft + document.documentElement.scrollLeft,
      top: document.body.scrollTop + document.documentElement.scrollTop,
    };
  }
}
function getViewportSize() {
  //返回可视窗口的宽高，与滚动条无关，与浏览器全屏半屏有关，与浏览器的实际大小有关，返回的是px
  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 {
      //标准模式：w3c规定的兼容标椎
      return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight,
      };
    }
  }
}
//一共的大小, 窗口加上偏移量
// getScrollOffset+getViewportSize相加
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,
    };
  }
}
//从可视窗口左上角到el元素左上角的距离，与滚动条无关
//el元素
function getElemDocPosition(el) {
  var 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 getStyles(elem,prop){
//             if(window.getComputedStyle){
//                 if(prop){
//                     return window.getComputedStyle(elem,null)[prop];
//                 }else{
//                     return window.getComputedStyle(elem,null);
//                   //没有写属性，就返回全部
//                 }
//             }else{
//                 if(prop){
//                     return elem.currentStyle(prop);
//    /*如果有属性，就返回属性值，与window.getComputedStyle(elem,null)[prop]
//      的结果一样，因为不同的浏览器对方法的支持程度不同*/
//                 }
//                 else{
//                     return elem.currentStyle;
//                   //返回所有
//                 }
//             }
//         }
//像top、left是左上角的距离
//查找元素对应的style的值
function getStyles(elem, prop) {
  if (window.getComputedStyle) {
    if (prop) {
      if (prop === "left" || prop === "top") {
        return parseInt(window.getComputedStyle(elem, null)[prop]);
      }
      return window.getComputedStyle(elem, null)[prop];
    } else {
      return window.getComputedStyle(elem, null);
    }
  } else {
    if (prop) {
      if (prop === "left" || prop === "top") {
        return parseInt(elem.currentStyle[prop]);
      }
      return elem.currentStyle[prop];
    } else {
      return elem.currentStyle;
    }
  }
}
//元素，事件类型，触发的方法
function addEvent(el, type, fn) {
  // console.log(el);
  if (el.addEventListener) {
    //方法存在
    el.addEventListener(type, fn, false);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, function () {
      fn.call(el); //将this指向改为调用的本身
    });
  } else {
    el["on" + type] = fn; //相当于el.on,例子el.onclick=func
  }
}
//移除事件
function removeEvent(elem, type, fn) {
  if (elem.addEventListener) {
    elem.removeEventListener(type, fn, false);
  } else if (elem.attachEvent) {
    elem.detachEvent("on" + type, fn);
  } else {
    elem["on" + type] = null;
  }
}
//阻止冒泡与捕获
function cancelBubble(e) {
  var e = e || window.event; //因为ie8 e里面拿不到事件，事件在window.event里面
  if (e.stopPropagation) {
    e.stopPropagation();
  } else {
    e.cancelBubble = true;
  }
}
//阻止默认函数行为
function preventDefaultEvent(e) {
  var e = e || window.event;
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}
//整个页面，算上滚动条的获取鼠标方位
function pagePos(e) {
  var sLeft = getScrollOffset().left,
    sTop = getScrollOffset().top,
    cLeft = document.documentElement.clientLeft || 0,
    cTop = document.documentElement.clientTop || 0;
  return {
    X: e.clientX + sLeft - cLeft,
    Y: e.clientY + sTop - cTop,
  };
}
//拖拽 封装好 以后直接调用就行了
function elemDrag(elem) {
  var x, y;
  addEvent(elem, "mousedown", function (e) {
    // console.log('1');
    var e = e || window.event;
    // console.log(elem);
    x = pagePos(e).X - getStyles(elem, "left");
    y = pagePos(e).Y - getStyles(elem, "top");
    addEvent(document, "mousemove", mouseMove);
    addEvent(document, "mouseup", mouseUp);
    cancelBubble(e); //保险起见 把阻止事件放进去
    preventDefaultEvent(e);
  });
  function mouseMove(e) {
    // console.log(elem);
    var e = e || window.event;
    elem.style.top = pagePos(e).Y - y + "px";
    elem.style.left = pagePos(e).X - x + "px";
  }
  function mouseUp(e) {
    var e = e || window.event;
    removeEvent(document, "mousemove", mouseMove);
    removeEvent(document, "mouseup", mouseUp);
  }
}
//发现子元素，兼容性写法
function elemChildren(node){
  var temp = {
      'length': 0,
      'push': Array.prototype.push,
      'splice': Array.prototype.splice
  },
  len = node.childNodes.length;
  for(var i = 0;i<len;i++){
      var childItem = node.childNodes[i];//得到所有节点
      if(childItem.nodeType === 1){//等于1是元素节点，而不是注释、文档节点
          temp[temp['length']] = childItem;
          temp['length']++;
          // temp.push(childItem); push方法
      }
  }
  return temp;
}