[Get location and size] #JavaScript

location_size.js

// 元素的偏移量 只读属性
// 包含了元素在屏幕上占的所有可用空间 由元素的大小来决定 包括内边距边框和滚动条
// !!! 不包括外边距
// 元素的offsetTop和offsetLeft属性是到上级包含它的元素的距离

// 计算元素在页面上的偏移量 将偏移量循环到根元素即可得到
function getOffsetPos (element) {

  var offsetTop = element.offsetTop,
      offsetLeft = element.offsetLeft;

  var curParent = element.offsetParent;
  // document.body.offsetParent == null;
  while (curParent !== null) {

    offsetTop += curParent.offsetTop;
    offsetLeft += curParent.offsetLeft;
    // 这里注意用offsetParent是因为在表格里面tbody是td之类的parentNode
    curParent = curParent.offsetParent;
  }
  return {
    left: offsetTop,
    top: offsetLeft
  };
}


// 获取客户区的大小  浏览器的客户区
// 客户区大小指的是元素的内容和其内边距的大小
// 每次访问都要重新计算 这里不需要参数 因为浏览器是固定的

function getViewport () {
  if (document.compatMode == 'BackCompat') {
    return {
      width: document.body.clientWidth,
      height: document.body.clientHeight
    };
  } else {
      return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      };
    }
}

// 获取元素的滚动大小 指的是包含滚动内容的元素的大小
// scrollWidth 没滚动条时候 元素的总宽度
// scrollHeight 没滚动条时 元素的总高度  通常认为html元素是web浏览器视口中滚动的元素 因此document.documentElement.scrollTop就是页面高度
// scrollLeft scrollHeight 被隐藏掉的滚动区域外的 像素数目 这个值可写  这样来设置滚动位置
// 对于不包含滚动条的页面 scrollWidth 和clientWidth的关系并不清晰 根据浏览器的不同有差异
function getDocSize () {
  return {
    width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
    height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
  };
}

// 对于混杂模式的IE浏览器 使用document.body代替document.documentElement


// 获取元素的位置
// 浏览器提供了一个getBoundingClientRect()方法 包含left top bottom right 四个属性
// 给出了元素相对于视口的位置 但是ie8以前以(2, 2)点为原点
// 跨浏览器方法如下
function getBoundingClientRect (element) {

  var scrollTop = document.documentElement.scrollTop,
      scrollLeft = document.documentElement.scrollLeft;

  if (element.getBoundingClientRect) {
    if (typeof arguments.callee.offset != 'number') {

      var temp = document.createElement('div');

      temp.style.cssText = 'position:absolute; left:0; top:0';
      document.body.appendChild(temp);
      arguments.callee.offset = - temp.getBoundingClientRect().top - scrollTop;
      document.body.removeChild(temp);
      temp = null;
    }

    var rect = element.getBoundingClientRect();
    var offset = arguments.callee.offset;

    return {
      left: rect.left + offset,
      right: rect.right + offset,
      top: rect.top + offset,
      bottom: rect.bottom + offset
    };
  }else {

    var actualLeft = getElementLeft(element);
    var actualTop = getElementTop(element);

    return {
      left: actualLeft - scrollLeft,
      right: actualLeft + element.offsetWidth - scrollLeft,
      top: actualTop - scrollTop,
      bottom: actualTop + element.offsetHeight - scrollTop
    };
  }
}

// 跨浏览器获取事件对象
function getEvent (event) {
  return event ? event : window.event;
}


// 鼠标事件发生在客户区的位置
// 所有浏览器都支持clientX和clientY属性
// 代表的是事件发生时候鼠标指针在视口中的水平坐标和垂直坐标
obj.addEventListener('click', function (ev) {
  var e = getEvent(ev);
  alert('点击位置在客户区的位置x方向坐标：' +  e.clientX + ', y方向坐标：' + e.clientY);
}, false);

// 鼠标事件页面坐标位置
// 页面坐标根据pageX和pageY两个数值计算。 基于页面本身的位置坐标
obj.addEventListener('click', function (ev) {
  var e = getEvent(ev);
  alert('点击位置在页面上x方向坐标：' +  e.pageX + ', y方向坐标：' + e.pageY);
}, false);

// 页面没有发生滚动的时候 pageX与pageY 和 clientX与clientY相等

// IE8以及更早版本不支持事件对象上的页面坐标 不过可以通过客户区坐标和滚动信息来计算出来
// 这个时候需要用到document.body(混杂模式)或者document.documentElement(标准模式)的scrollLeft和scrollTop属性

function getPagePos(e){
  var pageX = e.pageX,
        pageY = e.pageY;

    if (pageX === undefined) {
      pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
    }
    if (pageY === undefined) {
      pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
    }

    return {
      x: pageX,
      y: pageY
    };
}

// 屏幕坐标的位置
// 事件发送时候鼠标指针相对于屏幕的位置坐标 用screenX和screenY来获得