摘要： 1、offsetX,offsetY:是event的属性，非DOM元素的属性含义：设置或者是得到鼠标相对于目标事件的父元素的位置，从父元素的边框位置计算起。IE中的属性， 经测试新版的chrome 、FF都支持（测试环境 chrome43 FF34）2、pageX，pageY 是event的属性，非DOM元素的属性含义：相对于页面的位置主流浏览器如FF chrome
1、offsetX,offsetY:
是event的属性，非DOM元素的属性
含义：设置或者是得到鼠标相对于目标事件的父元素的位置，从父元素的边框位置计算起。
IE中的属性， 经测试新版的chrome 、FF都支持（测试环境 chrome43 FF34）
2、pageX，pageY
是event的属性，非DOM元素的属性
含义：相对于页面的位置
主流浏览器如FF chrome支持 ie8及以下不支持 （但是IE中有一个替补属性 e.x,e.y 和pageX、Y是一样的效果）
3、offsetLeft、offsetTop
offsetTop、left：是DOM元素的属性，都支持 但浏览器解析不一样
在IE7及以下：直接相对于父元素
IE8以及其他浏览器：该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的，设置了position的父对象”中的位置，如果没有找到，则是相对于根元素 html的位置（而不是body）
4、浏览器默认的margin padding值
关于body的padding margin：
主流浏览器和IE8： margin：8px
ie7以及以下：margin:15px padding:medium
5、offsetParent
含义: 向上寻找父元素，且父元素使用了定位方式。如果向上找不到定位的父元素，则返回body
否则返回这个定位的父元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mouse position</title>
<style>
/* body{margin:0;padding:0;} */
#posDiv{
/* position: relative; */
width:800px;
height:500px;
border:1px solid red;
}
#noposDiv{
width:100px;
height: 100px;
border:10px solid green;
margin-left:100px;
}
</style>
</head>
<body>
<div id="posDiv">
<div id="noposDiv">
</div>
</div>
<script>
var offParent = document.getElementById('noposDiv').offsetParent;
console.log('offParent',offParent);
/**
* offsetX,offsetY:是event的属性，IE 和新版的chrome 、FF都支持
* pageX : ie8及以下不支持，其他主流浏览器FF chrome支持
*
* offsetTop、left：是DOM元素的属性，都支持 但浏览器解析不一样
* 在IE7及以下：直接相对于父元素
* IE8以及其他浏览器：该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的，设置了position的父对象”中的位置，如果没有找到，则是相对于根元素 html的位置
*
*
* 关于body的padding margin： 主流浏览器和IE8： margin：8px
* ie7以及以下：margin:15px padding:medium
*
* offsetParent: 向上寻找父元素，且父元素使用了定位方式。如果向上找不到定位的父元素，则返回body
* 否则返回这个定位的父元素。
* @type {[type]}
*/
var noposDiv = document.getElementById('noposDiv');
if(noposDiv.addEventListener){
noposDiv.addEventListener('click',function (e){
var evtx = e.offsetX;
var evty = e.offsetY;
var pagex = e.pageX;
var pagey = e.pageY;
var offLeft = noposDiv.offsetLeft;
var offTop = noposDiv.offsetTop;
var x = e.x;
var y = e.y;
console.log('offsetx y',evtx,evty);
console.log('pagex y',pagex,pagey);
console.log('div元素的属性 offLeft ',offLeft,offTop);
console.log('e.x,e.y',e.x,e.y); ///在chrome中 与pageX一样； FireFox不支持该属性
},false);
}else if(noposDiv.attachEvent){
noposDiv.attachEvent('onclick',function (e){
var evtx = e.offsetX;
var evty = e.offsetY;
var pagex = e.pageX;
var pagey = e.pageY;
var offLeft = noposDiv.offsetLeft;
var offTop = noposDiv.offsetTop;
var x = e.x;
var y = e.y;
console.log('offsetx y',evtx,evty);
console.log('pagex y',pagex,pagey);
console.log('div元素的属性 offLeft ',offLeft,offTop);
console.log('e.x,e.y',e.x,e.y);
});
}
</script>
</body>
</html>
