本篇文章给大家带来的内容是关于js中鼠标事件和距离属性的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
js中有很多“距离”，为了不会混淆这里总结一下其中部分距离
本文包括元素属性相关的距离和鼠标事件中的距离，废话不多说，进入正文
先补充一下，本文的测试环境如下：
chrome dev 54.0.2840.71
firefox 49.0
opera 41.0
safari 10.1
ie 11。前四者运行在macos sierra 10.12上，ie11运行在搭载windows10 1607的虚拟机上
元素属性中的各种“距离”元素属性中的距离有以下6对：
scrollleft: 设置或获取位于对象左边界和窗口中可见内容的最左端之间的距离
scrolltop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离offsetheight: 获得对象的可视区域的高度，包括边框
offsetwidth: 获得对象的可视区域的宽度，包括边框
clientheight: 获得对象边框内部分的高度
clientwidth: 获得对象边框内部分的宽度
offsetleft: 获取对象相对于版面或由offsetparent属性指定的父坐标的计算左侧位置
offsettop: 获取对象相对于版面或由offsettop属性指定的父坐标的计算顶端位置
clienttop: 获取对象顶部边框宽度
clientleft: 获取对象左侧边框宽度
scrollwidth: 获取对象的滚动宽度
scrollheight: 获取对象的滚动高度。
上面提到了offsetparent属性，其实当前p相对谁定位，这个属性就是谁。根据position值不同，有以下2种情况
当父辈元素都没有relative属性时，无论当前元素的position是absolute，relative，fixed或fixed，offsetparent都是body元素
父辈元素有relative属性时，无论当前元素的position是absolute，relative，fixed或fixed，offsetparent是具有relative属性的最近父元素
分不清楚？ 看下图
这个里面可以清晰的看到上方的前4对，和他们之间的关系。
关于jquery的元素距离属性，文章最后整理了他们和dom属性之间的关系。
第一个值得强调的是，上面的这个例子中的p的box-sizing属性是默认的content-box, 它的offsetheight，clientheight，clientwidth和offsetwidth有如下关系：
clientheight = height + paddingtopwidth + paddingbottomwidth;
clientwidth = width + paddingleftwidth + paddingrightwidth;offsetheight = clientheight + bordertopwidth + borderbottomwidth;
offsetwidth = clientwidth + borderleftwidth + borderrightwidth;
如果box-sizing属性是border-box,那么，它们的关系将如下（ie6 ie7默认是这样的）:
offsetheight = height;
offsetwidth = width;clientheight = height - bordertopwidth - borderbottomwidth;
clientwidth = width - borderleftwidth - borderrightwidth;
第二个值得强调的是，这个例子中，由于它的父元素没有设置position:relative，所以图中这个p利用position:absolute;相对文档定位，如果给他添加一个具有position:relative属性的父p，那么offsetleft和offsettop就是下图这样：
不过无论它怎么的定位，哪怕是position:relative或fixed，它的计算关系也不会发生变化，依然是：
offsetleft = left + marginleft;
offsettop = top + margintop;
讲了这么多，那么scrollwidth和scrollheight呢？scrollwidth和scrollheight在不同浏览器里面并不一致，如下图（从左到右依次是chrome, firefox,  opera,  safari,  ie11）
其实仔细研究这个里面的不同，会发现在不同的浏览器p的offsetleft、offsettop这两个值的属性并不完全相同。当p里面的内容溢出时，只有ie保留了padding的全部值，chrome、opera和safari会忽略padding-right的值视其为0，firefox会同时忽略padding-right和padding-bottom，如下图
在各个浏览器中，对于滚动条本身的渲染也不一样。它们会在计算scrollwidth和scrollheight时排除各自的滚动条宽度。除了上述的不同，实际发现每个浏览器中scrollleft和scrolltop的最大值也不一样，甚至差距极大，由于scrollleft和scrolltop随滚动事件发生而输出，博主就上述例子的最大值记录如下：
maximum valuechromefirefoxoperasafariie11
scrollleft 330 160 827 330 217
scrolltop 230 210 485 230 330
实际上就是由于这些元素属性在不同浏览器中的差异导致scrollwidth和scrollheight的不同，具体使用应格外注意。不过博主看过一些资料表示这两个属性和offsetparent有关，通过实际编程发现它们和offsetparent无关，这里不展开描述了，因为低版本浏览器，尤其ie7 ie6的实现方式可能会比较奇葩。
鼠标事件中的各种“距离”鼠标事件很多，不过每个事件中关于距离的属性含义是一样的，这里用mousemove来讲解，具体的内容会在不久之后写到了js事件部分讲解。
鼠标实现对于现在的浏览器来说，实现都是一样的了，下面例子都在chorme中实现。
鼠标事件有以下6对：
event.clientx：相对浏览器左上角的水平坐标
event.clienty：相对浏览器左上角的垂直坐标event.offsetx：相对于事件源(event.target||event.srcelement)左上角水平偏移
event.offsety：相对于事件源(event.target||event.srcelement)左上角垂直偏移
event.pagex：相对于document左上角的水平坐标
event.pagey：相对于document左上角的垂直坐标
event.layerx：相对于offsetparent左上角的水平偏移
event.layery：相对于offsetparent左上角的水平偏移
event.movementx：相对于前一次事件中screenx的偏移
event.movementy：相对于前一次事件中screeny的偏移
event.screenx：相对于屏幕左上角的水平坐标
event.screeny：相对于屏幕左上角的垂直坐标
x：和pagex一样，用于兼容ie8及以前浏览器
y：和pagey一样，用于兼容ie8及以前浏览器
总之，还是先看图
*这个图中，黑色实线边框表示浏览器可视区域部分，外层蓝色虚线框表示整个dom部分,整个图为电脑屏幕
图里面怎么没有movementx和movementy?因为这个事件的值和上一个事件有关，关系如下：
currentevent.movementx = currentevent.screenx - previousevent.screenx
currentevent.movementy = currentevent.screeny - previousevent.screeny值得注意的时offsetx和offsety，他表示鼠标到事件源padding左上角的的偏移，这里mousemove事件注册在window上，所以位置如图所示。
当浏览器的水平滚动条滑动以后，pagex和clientx就不同了。同理，当浏览器的垂直滚动条滑动以后，pagey和clienty就不同了,但它们始终存在以下关系：
event.pagex = event.clientx + body.scrollleft;
event.pagey = event.clienty + body.scrolltop;鼠标事件中的距离比元素中的简单一些，具体的使用放在之后写的事件部分。
jquery中元素距离属性var $p = $(#p);$p.width(); //元素宽度，不包括padding和border
$p.height(); //元素高度，不包括padding和border
$p.innerwidth(); //元素内宽度，包括padding，不包括border
$p.innerheight(); //元素内高度，包括padding，不包括border
$p.outterwidth(); //元素可见宽度，包括padding和border
$p.outterheight(); //元素可见高度，包括padding和border
$p.outterwidth(true); //元素全部宽度，包括padding、border和margin
$p.outterheight(true); //元素全部高度，包括padding、border和margin
相关推荐：
jquery计算鼠标和指定元素之间距离的方法_jquery
js关于鼠标离开事件
以上就是js中鼠标事件和距离属性的介绍的详细内容。