clientX,screenX,pageX,offsetX的异同

此文有部分错误,请前往:javascript:与获取鼠标位置有关的属性

首先说明一下以上对象都是指javascript中的,不包含其他语言。

pageX/pageY:

鼠标相对于整个页面的X/Y坐标。注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了。

特别说明:IE不支持

offsetX/offsetY:

得出的结果跟pageX/pageY一样,既然如此,它有什么存在价值?因为:

特别说明:只有IE支持!相当于IE下的pageX,pageY.

screenX/screenY:

顾名思义,就是鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过你的屏幕分辨率。

特别说明:无

clientX/clientY

事件发生时鼠标在浏览器内容区域的X/Y坐标(不包含滚动条)。浏览器内容区域即浏览器窗口中用来显示网页的可视区域,注意这个可视,也就是说需要拖动滚动条才能看到的区域不算。当你将浏览器窗口缩小时,clientX/clientY的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域。

特别说明:IE下此属性不规范,它们的最小值不是0而是2,也就是说IE下的clientX/clientY与火狐下的始终大2px

如果还有疑惑,可以去我的示例页面测试。

如果还有疑问,可以留言询问我,我尽所能帮你解答。

1 评论

发表评论

电子邮件地址不会被公开。