鼠标行为

e.属性	含义	相关属性
clientX/Y	鼠标位置相对于当前可视区域的坐标	x/y（FF火狐部分版本不支持）
pageX/Y(IE9以下不支持)	鼠标位置相对于当前文档的坐标	layerX/Y (IE11以下同clientX/Y)
screenX/Y	鼠标位置相对于显示器屏幕的坐标
offsetX/Y	鼠标位置相对于块元素的坐标（以左上角为顶点，包括边框，Safari不包括边框）

pageXY封装

// 兼容性写法：获取相对文档的位置
function pagePos(e) {var sLeft = getScrollOffset().left,sTop = getScrollOffset().top,cLeft = document.documentElement.clientLeft || 0,// 获取文档偏移，若值为undefined，取偏移为0cTop = document.documentElement.clientTop || 0;return {X: e.clientX + sLeft - cLeft,Y: e.clientY + sTop - cTop,}
}

拖拽

• mousemove是基于mousedown事件的

oBox.onmousedown = function (e) {document.onmousemove = function (e) {var e = e || window.event,page = pagePos(e);oBox.style.left = page.X + 'px'oBox.style.top = page.Y + 'px'}
}
oBox.onmouseup = function (e) {document.onmousemove = null
}

// 拖拽的时候，box的左上角顶点不要突变到鼠标的位置
oBox.onmousedown = function (e) {var e = e || window.event,x = pagePos(e).X - parseInt(getStyles(this, 'left')),y = pagePos(e).Y - parseInt(getStyles(this, 'top'));document.onmousemove = function (e) {var e = e || window.event,page = pagePos(e);oBox.style.left = page.X - x + 'px'oBox.style.top = page.Y - y + 'px'}document.onmouseup = function (e) {this.onmousemove = nullthis.onmouseup = null}
}

// 封装拖拽函数
function elemDrag(elem) {var x,y;addEvent(elem, 'mousedown', function (e) {var e = e || window.event;x = pagePos(e).X - parseInt(getStyles(elem, 'left'))y = pagePos(e).Y - parseInt(getStyles(elem, 'top'))console.log(x, y)addEvent(document, 'mousemove', mouseMove)addEvent(document, 'mouseup', mouseUp)cancelBubble(e)preventDefaultEvent();function mouseMove(e) {var e = e || window.event,page = pagePos(e)elem.style.top = page.Y - y + 'px'elem.style.left = page.X - x + 'px'}function mouseUp(e) {var e = e || window.eventremoveEvent(document, 'mousemove', mouseMove)removeEvent(document, 'mouseup', mouseUp)}})
}