浏览器上的几种xy坐标

首先分为两大类：

• 事件坐标
• dom 坐标

事件坐标

有如下几种：

• screenX, screenY
• clientX, clientY
• pageX, pageY
• offsetX, offsetY

下面这张图可以很好的对比展示这几种 xy 坐标：

那如果是在 iframe 中的 document，clientX 和 screenX 还是符合直觉的值吗？

答案是 clientX 不是，screenX 是。

clientX 的值是从 document 的左起始位置算起的，不会考虑 iframe 距离浏览器左边距。screenX 则依然是距离屏幕左边的距离。

dom 坐标