JQuery开发5-在网页中获取鼠标的三种坐标-优快云博客

本文介绍了在JavaScript中获取鼠标坐标的三种方式：screenX/Y（屏幕坐标），clientX/Y（窗口客户区坐标，随滚动条改变），pageX/Y（页面区域坐标，不随滚动条改变）。通过示例代码展示了如何使用这些属性，并提供了实时显示鼠标的屏幕、客户区和页面坐标的示例。

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

在开发过程中。有时候会获取鼠标当前的坐标，主要分为三种，第一种是获取鼠标在屏幕中的坐标，第二种是获取鼠标在客户区中的坐标，第三种是获取鼠标在窗口页面中的坐标。

分别用的方法名称为screenX和screenY，clientX和clientY，pageX和pageY。

属性说明

clientX/clientY
名称说明返回
clientX 返回事件触发时鼠标相对于元素视口的X坐标数值
clientY 返回事件触发时鼠标相对于元素视口的Y坐标数值

这里的元素视口实际上代指就是浏览器，clientX是鼠标距离浏览器左边框的距离，clientY是鼠标距离浏览器上边框的距离。当鼠标停留在页面某个位置时，滚动鼠标滚动条，坐标会随着鼠标滚动条的改变而改变。
screenX/screenY
名称说明返回
screenX 返回事件触发时鼠标相对于屏幕的X坐标数值
screenY 返回事件触发时鼠标相对于屏幕的Y坐标数值

顾名思义，screenX是鼠标距离显示器屏幕左边框的距离，screenY是鼠标距离显示器屏幕上边框的距离。

pageX/pageY
名称说明返回
pageX 返回事件触发时鼠标相对于文档的X坐标数值
pageY 返回事件触发时鼠标相对于文档的Y坐标数值

如果鼠标停留在网页中的某个位置，滚动鼠标滚动条，pageY不会因为鼠标滚动的滚动而改变。
参考代码如下
Java代码
1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3. <html>
4. <head>
5. <script language="javascript"
6. src="${pageContext.request.contextPath}/script/jquery.js"></script>
7. <script type="text/javascript">
8. $(document).ready(function() {
9. $(document).mousemove(function(e) {
10. getScreenCoordinates(e);//获取鼠标在屏幕中的坐标
11. getClientCoordinates(e);//获取鼠标在窗口客户区中的坐标，会随着滚动条的滚动而变化
12. getPageCoordinates(e);//获取鼠标当前页面区域中的坐标，不会随滚动条滚动而变化
13. });
14. function getScreenCoordinates(e) {
15. x1 = e.screenX;
16. y1 = e.screenY;
17. $(".sp1").text("X1:" + x1 + ",Y1:" + y1);
18. }
19. function getClientCoordinates(e) {
20. x2 = e.clientX;
21. y2 = e.clientY;
22. $(".sp2").text("X2:" + x2 + ",Y2:" + y2);
23. }
24. function getPageCoordinates(e) {
25. x3 = e.pageX;
26. y3 = e.pageY;
27. $(".sp3").text("X3:" + x3 + ",Y3:" + y3);
28. }
29. });
30. </script>
31. </head>
32. <body>
33. test
34. test
35. test
36. test
37. test
38. test
39. test
40. test
41. test
42. test
43. test
44. 
45. 鼠标当前屏幕的坐标为：
46. 
47. 
48. 鼠标当前窗口客户区坐标为：
49. 
50. 
51. 鼠标当前页面区域中的坐标为：
52. 
53. test
54. test
55. test
56. test
57. test
58. test
59. test
60. test
61. test
62. test
63. test
64. </body>
65. </html>