clientX,screenX,pageX,offsetX的区别

最新推荐文章于 2024-09-04 10:31:20 发布

weixin_34232363

最新推荐文章于 2024-09-04 10:31:20 发布

阅读量93

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2395167/blog/528987

版权

2019独角兽企业重金招聘Python工程师标准>>>

<script>function mouseDown(ev)
{ev=ev||window.event;alert("page \r\n  X:"+ev.pageX+"  Y: "+ev.pageY+"\r\n client \r\n  X:"+ev.clientX+"  Y: "+ev.clientY+"\r\n screen \r\n  X:"+ev.screenX+" Y: "+ev.screenY+"\r\n X/Y \r\n  X:"+ev.X+"  Y: "+ev.Y+"\r\n offset \r\n X: "+ev.offsetX+"  Y:"+ev.offsetY);}
document.onmousedown=mouseDown;</script>

1、pageX/pageY：鼠标相对于整个页面文档（document）的X/Y坐标。注意，整个页面的意思就是你整个网页的全部，它不会随着滚动条而变动。特别说明：IE不支持！--兼容性：除IE6/7/8不支持外，其余浏览器均支持

2、offsetX/offsetY: 特别说明：只有IE支持！相对于当前元素的位移(即：触发点相对被触发dom的左上角距离。不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。)。--兼容性：只有IE支持

3、screenX/screenY:此时的参照点也就是原点是屏幕的左上角。--兼容性：所有浏览器均支持

4、clientX/clientY：跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而改变。特别说明：IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY与火狐下的始终大2px。--兼容性：所有浏览器均支持

图解：