五大位置offset,client,scroll,screen,page

前言凡是事件中含有x和y的都是为了获取鼠标指针位置相对于触发事件的对象的位置，但是又各不相同

一、偏移量offset

//获取坐标
节点.offsetLeft;
节点.offsetTop;
获取节点的大小
节点.offsetWidth;（一个盒子的所有边框 内边距和内容）
节点.ofsetHeight；
事件.offsetX---表示鼠标距离此事件对象的边框的水平位置（不含边框）-当鼠标事件发生时，鼠标相对于事件源x轴的位置
事件.offsetY---表示鼠标距离边框的垂直位置
offsetParent用于获取定位的父级元素，如果没有定位父元素此时时body------最近定位的父元素的距离

二、client鼠标距离(不含边框)（获取边框的宽度）

• 文档没有滚动条的时候就是鼠标的可视图坐标

clientLeft 是border-left的宽度
clientTop获取的是border-top的宽度
box.clientWidth获取大下，包括padding但是不包括边框
box.clientHeight
事件.clientX是鼠标距离可视区域的距离(包含边框)

三、scroll

box.scrollTop;//表示隐藏的垂直距离加边框
box.scrollLeft；//隐藏的水平距离加边框
box.scrollWidth;//原来大小
box.scrollHeight;//原来大小

四、page(文档坐标)这个当文档没有滑动条时候和client一样

pageX、pageY:

类似于clientX、clientY,相对于浏览器窗口可视区域的X,Y坐标加上滚动条滚动的长度，说白了就是文档坐标。

五、screen显示屏

screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
 screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；