pageX,clientX,offsetX,screenX的差别

转载 2016年08月29日 15:33:59
pageX/pageY:
鼠标相对于整个页面的X/Y坐标。
注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了。
特别说明:IE不支持!
clientX/clientY:
事件发生时鼠标在浏览器内容区域的X/Y坐标(不包含滚动条)。
浏览器内容区域即浏览器窗口中用来显示网页的可视区域,注意这个可视,也就是说需要拖动滚动条才能看到的区域不算。
当你将浏览器窗口缩小时,clientX/clientY的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域。
特别说明:IE下此属性不规范,它们的最小值不是0而是2,也就是说IE下的clientX/clientY比火狐下始终大2px。
screenX/screenY
鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率。
offsetX/offsetY:
得出的结果跟pageX/pageY一样,既然如此,它有什么存在价值?因为:
特别说明:只有IE支持!相当于IE下的pageX,pageY。

e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft = e.pageX
e.clientY + document.documentElement.scrollTop  - document.documentElement.clientTop = e.pageY

相关文章推荐

clientX,pageX,offsetX,layerX,screenX,offsetLeft区别分析

scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容...

pageX, clientX, offsetX/layerX, screenX, scrollLeft()属性

e.pageX——是鼠标指针的位置,相对于文档的左边缘,即相对整个页面的坐标(IE8及其以下的版本不支持该属性) $(selector).scrollLeft(position)——返回(无posi...

一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

一张图轻松搞懂javascript event对象的 clientX,offsetX,screenX,pageX区别

比较offsetX, pageX,clientX,screenX的区别

之前一直没有把offset,page,client和screen这几个属性弄得很清楚,今天花了点时间算是大体上了解了这几个属性的区别,所以把我了解到的写出来,也算是做个总结。 首先我们来看看这几个属...

js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别

pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,同一个元素坐标不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,即是以浏览器滑动条此刻的滑动到的位置为参考点,同一个...

理解e.clientX、e.clientY、e.pageX、e.pageY、e.offsetX、e.offsetY、e.screenX、e.screenY

e.clientX、e.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 e.pageX、e.pageY 类似于...

一图胜千言,秒懂巧记JavaScript中event对象的clientX,offsetX,screenX,pageX区别

区别: event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.p...

pageX、clientX、screenX、offsetX、layerX、x

chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 ...

区分clientX、offsetX、pageX、screenX

以前一直以为写了这几个属性的区分的,今天再来看居然没有写。 不过这个还是很有用的。这里再来总结一下。所有解释都在图里面。这里再来文字解释一下,图中至标注了Y的值,X同理。clientX client...

offsetTop clientX pageX screenX scrollTop之间的区别以及代码实现

边界尺寸 var a= e.pageX;//鼠标在页面中的坐标位置,可能大于整个屏幕 var ay= e.pageY;//鼠标在页面中的坐标位置,可能大于整个屏幕 //console.log...
  • theowl
  • theowl
  • 2015年07月21日 14:14
  • 671
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:pageX,clientX,offsetX,screenX的差别
举报原因:
原因补充:

(最多只允许输入30个字)