js event的各个坐标属性

来自stackoverflow，第一篇，第二篇

---

说明一下不同开头的有（这里省略X,Y）：offset, client, page, screen, layer。浏览器不同，可能有些属性支持不同。转去查看。最后注意他们都是整数，单位是px。

---

为了减少烦躁，这里直接放图，估计都能理解了：
pageY和clientY

---

screenX、screenY：坐标原点为电脑(手机)显示屏的左上角。
pageX、pageY：坐标原点为html页面的左上角。
clientX、clientY：坐标原点为浏览器显示区域的左上角。

offsetX、offsetY：坐标原点为事件源（触发该事件的那个元素）的padding box的左上角。

layerX、layerY：坐标原点为离点击处最近的那个元素的左上角（如果元素position是static，那么这个元素不算，继续找）。目前Chrome，Opera，Firefox支持，但标准是不赞成这个的，未来会被移除，不要用，忘掉它。

---

后记

提一下容易混肴的几个量度:
css的left、margin-left、width；js元素对象属性的offsetWidth、clientWidth；js中event对象的offsetX, clientX, pageX, screenX, layerX。
可以参考下我翻译的另外几篇：
css border-box与content-box的不同点
js event的各个坐标属性
js 元素的client/offsetwidth和client/offsetleft相关属性
上面3篇有些凌乱分散，有能力的直接阅读这篇：Element size and scrolling