在本文中，我们将探讨 screenX/Y、clientX/Y 和 pageX/Y 之间的区别。JavaScript 中关于 screenX/Y、clientX/Y 和 pageX/Y 这几个属性的区别常常让人感到困惑。每个属性都会返回一个数值，表示从不同参考点开始计算的物理像素数。下面我们将详细描述这些属性的区别及其使用场景：

screenX 和 screenY 属性：

screenX 和 screenY 是只读属性，分别提供相对于全局（或屏幕）坐标的水平和垂直坐标。它们返回一个双精度浮点值来表示该坐标。
示例： 这个示例展示了在 Javascript 中使用 screenX 和 screenY 属性的基本方法。

HTML

INLINECODEbca1f2dd`INLINECODE64fa9bb4

`

****输出：****

### ****clientX 和 clientY 属性：****

[****clientX****](https://www.geeksforgeeks.org/html/html-dom-mouseevent-clientx-property/) 和 [****clientY****](https://www.geeksforgeeks.org/html/html-dom-mouseevent-clienty-property/) 是只读属性，分别提供内容区域（或浏览器窗口视口）内的水平和垂直坐标。

例如，如果用户垂直向下滚动网页并点击视口的起始位置，clientY 将始终返回 0。它返回一个双精度浮点值来表示该坐标。

****示例：**** 这个示例展示了在 Javascript 中使用 [clientX](https://www.geeksforgeeks.org/html/html-dom-mouseevent-clientx-property/) 和 [clientY 属性](https://www.geeksforgeeks.org/html/html-dom-mouseevent-clienty-property/) 的基本方法。

            HTML

    `

<meta content="width=device-width,

initial-scale=1.0" name="viewport" />

GeeksforGeeks

The clientX and clientY property

Click anywhere in this rectangle to

see the usage of the clientX and

clientY properties

<div style="width: 300px;

height: 200px;

border: 1px solid black;" onclick="showCoordinates(event)">