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>
时间: 2024-11-11 01:29:00