目录
offset
client
screen
page
window.innerWidht
offset
offsetX、offsetY为当前鼠标点击位置距离当前元素参考原点（左上角）的距离，而不同浏览器参考原点的位置不尽相同，FF及Chrome中参考原点为内容区域左上角，不包含元素边框
- offsetX 鼠标当前点击位置距离当前点击元素内容区域最左边（不包含边框）的距离
- offsetY 鼠标当前点击位置距离当前点击元素内容区域最上边（不包含边框）的距离
点击不同位置，参考原点不同，则距离不同
以下四个点可供理解offset的相对位置及尺寸
client
clientX、clientY为当前鼠标点击位置距离浏览器显示内容窗口左上角的距离，总是获取当前点击位置距离窗口左上角的距离
- clientX 鼠标当前点击位置距离浏览器窗口内容区域最左边的距离
- clientY 鼠标当前点击位置距离浏览器窗口内容区域最上边的距离
点击不同位置，参考点不会改变
以下3个点可供参考client的相对位置及尺寸
screen
screenX、screenY为鼠标当前点击位置距离电脑桌面左上角的距离，总是参考桌面进行定位，获取尺寸。
- screenX 鼠标当前点击位置距离桌面窗口最左边的距离
- screenY 鼠标当前点击位置距离桌面窗口最上边的距离
如图解释
page
pageX、pageY和clientX、clientY很相似，但是不同点在于：
- pageX pageX = clientX + 横向滚动距离
- pageY pageY = clientY + 纵向滚动距离
window.innerWidht window.innerHeight
- window.innerWidth 返回当前浏览器可视内容区域的宽度
- window.innerHeight 返回当前浏览器可视内容区域的高度
当进行浏览器窗口缩放时，会改变当前浏览器可视内容区域的尺寸，影响window.innerWidth、window.innerHeight的大小
outerWinth、outerHeight与innerWidth、innerHeight的区别在于outerWidth计算了内容区域及工具栏，滚动条在内的总宽高
