clientX, clientY,offsetX, offsetY,screenX, screenY, x, y,pageX,pageY的区别

本文详细解析了鼠标坐标在不同浏览器环境下的计算方法,包括clientX, clientY, offsetX, offsetY, screenX, screenY等属性的区别,并讨论了页面滚动对鼠标坐标的影响。通过实际例子展示了如何在页面滚动的情况下获取鼠标相对于页面元素的真实坐标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于网页中的某一区域左上角的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于网页中的某一区域的左上角的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x (FF下是pageX)
y (FF下是pageY )

所以,若网页有被滚动(有滚动条且进行了滚动),则此时鼠标的坐标应为:

event.x等于event.clientX+document.body.scrollLeft;

event.y等于event.clientY+document.body.scrollTop;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值