JS之clientX,clientY,screenX,screenY,offsetX,offsetY等区别

1.event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

2.event.pageX、event.pageY

类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

3.event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

4.event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;

网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置，用：
document.documentElement.scrollTop;（用于IE浏览器）
而不是：
document.body.scrollTop;（补充：用于chrome等浏览器）
documentElement 对应的是 html 标签，而 body 对应的是 body 标签

详情地址：http://blog.csdn.net/u014205965/article/details/45606797

JS之clientX,clientY,screenX,screenY,offsetX,offsetY等区别相关推荐

JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反 ...
clientX,clientY,screenX,screenY,offsetX,offsetY 区别测试
clientX:当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等),鼠标相对于浏览器(这里说的是浏览器的有效区域)x轴的位置: clientY:当鼠标事件发生 ...
js 事件回调函数的对象属性说明：clientX、screenX、offsetX、pageX
clientX 鼠标相对于浏览器左上角x轴的坐标: 不随滚动条滚动而改变: clientY 鼠标相对于浏览器左上角y轴的坐标: 不随滚动条滚动而改变: pageX 鼠标相对于浏览器左上角x轴的坐标: ...
HTML 页面中的位置：clientX、screenX、offsetX、pageX
事件中鼠标的 (x,y) 位置 clientX 鼠标相对于浏览器左上角x轴的坐标: 不随滚动条滚动而改变: clientY 鼠标相对于浏览器左上角y轴的坐标: 不随滚动条滚动而改变: pageX 鼠标 ...
pageX、clientX、screenX、offsetX、layerX、x
参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标 e.layerX- ...
PageX、clientX、screenX、offsetX、layerX的区别
一.PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是 ...
【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY
鼠标事件 MouseEvent 对象,下clientX clientY offsetX offsetX pageX screenX screenY 定义转自 MDNMouseEvent MouseEv ...
clientX/clientY 与 screenX/screenY 的区别
clientX/clientY 与 screenX/screenY 的区别在JavaScript当中有时候我们需要获取鼠标悬停的位置,以此来做一些特殊处理.这时候就需要用到MouseEvent对象. ...
js事件坐标大乱斗：screenX、clientX、pageX、offsetX
screenX: 鼠标相对于电脑屏幕的X坐标 screenY: 鼠标相对于电脑屏幕的Y坐标 clientX/clientY: 鼠标的坐标到可视区域的坐标,比如在谷歌浏览器中,指工具栏之下的区域.注意跟 ...

JS之clientX,clientY,screenX,screenY,offsetX,offsetY等区别

JS之clientX,clientY,screenX,screenY,offsetX,offsetY等区别相关推荐

最新文章

热门文章