在做一些组件和交互时，常常需要动态获取鼠标点击位置、元素宽高和元素位置信息，网上有很多种方法，但自己没有总结过，不知道各种方法的优缺点和兼容性，在此专门的总结一下。
注意：
- 这些关于视觉的内容都被定义在了 W3C 的 CSSOM View Module 模块中，里面有详细的接口定义和说明，建议好好研读。
- 本文主要参照 W3C 文档全面了解各个属性的意义，对应接口文档用图文的方式直观显示各个属性的含义。但也会有一些自己没有完全理解和错误之处，请各位批评指正，后续会继续完善。
- 本文涉及到图片较多，为了获得最佳体验，建议使用电脑阅读。
阅读 W3C 规范的总结
Extensions to the Window Interface
图片纠错： scrollX = pageXOffset：表示滚动条在X轴方向上滚动的距离；scrollY = pageYOffset：表示滚动条在Y轴方向上滚动的距离
The Screen Interface
Extensions to the Document Interface
Extensions to the Element Interface
Extensions to the HTMLElement Interface
Extensions to the HTMLImageElement Interface
Extensions to the Range Interface
getBoundingClientRect()返回对象的属性
Extensions to the MouseEvent Interface
希望对你有帮助，欢迎分享和批评指正~~~~~
参考
- CSSOM View Module
- CSSOM视图模式(CSSOM View Module)相关整理
- W3C DOM Core
- UIEvent
- 一张图彻底掌握scrollTop, offsetTop, scrollLeft, offsetLeft......
- MDN:HTMLElement.offsetParent
- 深入理解定位父级offsetParent及偏移大小
- offsetParent算法分析