浏览器的鼠标坐标值获取及pageX、clientX、screenX的差异

最新推荐文章于 2023-07-05 15:40:48 发布

chenqiong1991

最新推荐文章于 2023-07-05 15:40:48 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔记 jquery插件学习笔记文章标签：浏览器鼠标

本文链接：https://blog.youkuaiyun.com/chenqiong1991/article/details/69358553

本文介绍了在浏览器环境中获取鼠标坐标的三种方式：pageX、clientX和screenX，强调了它们在不同情况下的区别。当浏览器最大化且无滚动时，三者值相同；否则，screenX会考虑到浏览器与屏幕的偏移。对于Y轴，screenY通常大于其他两者，而clientY与pageY在页面无滚动时相等，但页面滚动时，pageY会考虑滚动距离。

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

写在前面

获取方法比较简单。重点在于理解三种值的实际意义。

代码

<p><strong>screen:</strong><span id="screen"></span></p>
<p><strong>client:</strong><span id="client"></span></p>
<p><strong>page:</strong><span id="page"></span></p>