前言
我们开发前端项目的时候经常会接触到网站点击事件和手机触摸事件来获取其坐标处理业务，然而前端有多种元素坐标和偏移值有时让我们不好分辨其区别，因为坐标和偏移量都是只读属性，这里我找几个常用的对象来整理一下。
触摸（Touch）和鼠标（MouseEvent）对象
这两个对象是通过对应事件获取的，我们来分析它的一些坐标属性。
clientX和clientY
clientX和clientY返回事件发生时的应用客户端区域的X坐标和Y坐标，不论页面是否有滚动。
pageX和pageY
pageX和pageY返回触点相对于HTML文档左边沿的的X坐标和Y坐标，当存在滚动的偏移时, 这个值包含了滚动的偏移（这里是跟client不同的点）。
screenX和screenY
screenX和screenY返回触点相对于屏幕边沿的的X坐标和Y坐标，不包含页面滚动的偏移量。
offsetX和offsetY
offsetX和offsetY返回事件对象与目标节点的内填充边padding在X轴和Y轴方向上的偏移量
DOM元素
offsetWidth/offsetHeight/offsetLeft/offsetTop
offsetLeft/offsetTop是相对于它的直接父元素的偏移量（包括滚动条）offsetWidth/offsetHeight等于元素内容加上内边距和边框。
offsetWidth = width + padding + border
offsetHeight = height + padding + border
clientWidth/clientHeight
clientWidth/clientHeight是元素内容及其内边距所占空间的大小
clientWidth = width + padding
clientHeight = width + padding
scrollWidth/scrollHeight/scrollLeft/scrollTop滚动相关
scrollHeight/scrollWidth是整个内容区的实际宽高等于内容可滚动区域，scrollLeft/scrollTop是出现了横/纵向滚动条的情况下，滚动条拉动的距离。
window对象
scrollX/scrollY与pageXOffset/pageYOffset
它们都是返回的是整个文档document在水平和竖直方向滚动了的距离，只是因为兼容性多出来的别名。
innerHeight/window.innerWidth
innerHeight/innerWidth记录了视口内文档元素的实际高度和宽度
outerHeight/window.outerWidth
outerHeight/window.outerWidth记录了整个浏览器窗口的实际高度和宽度（包括侧边栏、窗口镶边和调正窗口大小的边框）
