鼠标位置相关属性
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 lang="en"> <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>
