摘要：鼠標(biāo)事件中的各種距離鼠標(biāo)事件很多，不過(guò)每個(gè)事件中關(guān)于距離的屬性含義是一樣的，這里用來(lái)講解，具體的內(nèi)容會(huì)在不久之后寫到了事件部分講解。

js中有很多“距離”，為了不會(huì)混淆這里總結(jié)一下其中部分距離

本文包括元素屬性相關(guān)的距離和鼠標(biāo)事件中的距離，廢話不多說(shuō)，進(jìn)入正文

先補(bǔ)充一下，本文的測(cè)試環(huán)境如下：

Chrome Dev 54.0.2840.71
Firefox 49.0
Opera 41.0
Safari 10.1
IE 11。
前四者運(yùn)行在macOS Sierra 10.12上，IE11運(yùn)行在搭載windows10 1607的虛擬機(jī)上

元素屬性中的距離有以下6對(duì)：

scrollLeft: 設(shè)置或獲取位于對(duì)象左邊界和窗口中可見(jiàn)內(nèi)容的最左端之間的距離
scrollTop: 設(shè)置或獲取位于對(duì)象最頂端和窗口中可見(jiàn)內(nèi)容的最頂端之間的距離
offsetHeight: 獲得對(duì)象的可視區(qū)域的高度，包括邊框
offsetWidth: 獲得對(duì)象的可視區(qū)域的寬度，包括邊框
clientHeight: 獲得對(duì)象邊框內(nèi)部分的高度
clientWidth: 獲得對(duì)象邊框內(nèi)部分的寬度
offsetLeft: 獲取對(duì)象相對(duì)于版面或由offsetParent屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置
offsetTop: 獲取對(duì)象相對(duì)于版面或由offsetTop屬性指定的父坐標(biāo)的計(jì)算頂端位置
clientTop: 獲取對(duì)象頂部邊框?qū)挾?br>clientLeft: 獲取對(duì)象左側(cè)邊框?qū)挾?/p>
scrollWidth: 獲取對(duì)象的滾動(dòng)寬度
scrollHeight: 獲取對(duì)象的滾動(dòng)高度。

上面提到了offsetParent屬性，其實(shí)當(dāng)前div相對(duì)誰(shuí)定位，這個(gè)屬性就是誰(shuí)。根據(jù)position值不同，有以下2種情況

當(dāng)父輩元素都沒(méi)有relative屬性時(shí)，無(wú)論當(dāng)前元素的position是absolute，relative，fixed或fixed，offsetParent都是body元素

父輩元素有relative屬性時(shí)，無(wú)論當(dāng)前元素的position是absolute，relative，fixed或fixed，offsetParent是具有relative屬性的最近父元素

分不清楚？ 看下圖

這個(gè)里面可以清晰的看到上方的前4對(duì)，和他們之間的關(guān)系。

關(guān)于jQuery的元素距離屬性，文章最后整理了他們和DOM屬性之間的關(guān)系。

第一個(gè)值得強(qiáng)調(diào)的是，上面的這個(gè)例子中的div的box-sizing屬性是默認(rèn)的content-box, 它的offsetHeight，clientHeight，clientWidth和offsetWidth有如下關(guān)系：

clientHeight = height + paddingTopWidth + paddingBottomWidth;
clientWidth = width + paddingLeftWidth + paddingRightWidth;
offsetHeight = clientHeight + borderTopWidth + borderBottomWidth;
offsetWidth = clientWidth + borderLeftWidth + borderRightWidth;

如果box-sizing屬性是border-box,那么，它們的關(guān)系將如下（ie6 ie7默認(rèn)是這樣的）:

offsetHeight = height;
offsetWidth = width;
clientHeight = height - borderTopWidth - borderBottomWidth;
clientWidth = width - borderLeftWidth - borderRightWidth;

第二個(gè)值得強(qiáng)調(diào)的是，這個(gè)例子中，由于它的父元素沒(méi)有設(shè)置position:relative，所以圖中這個(gè)div利用position:absolute;相對(duì)文檔定位，如果給他添加一個(gè)具有position:relative屬性的父div，那么offsetLeft和offsetTop就是下圖這樣：

不過(guò)無(wú)論它怎么的定位，哪怕是position:relative或fixed，它的計(jì)算關(guān)系也不會(huì)發(fā)生變化，依然是：

offsetLeft = left + marginLeft;
offsetTop = top + marginTop;

講了這么多，那么scrollWidth和scrollHeight呢？scrollWidth和scrollHeight在不同瀏覽器里面并不一致，如下圖（從左到右依次是Chrome, Firefox, Opera, Safari, IE11）

其實(shí)仔細(xì)研究這個(gè)里面的不同，會(huì)發(fā)現(xiàn)在不同的瀏覽器div的offsetLeft、offsetTop這兩個(gè)值的屬性并不完全相同。當(dāng)div里面的內(nèi)容溢出時(shí)，只有IE保留了padding的全部值，chrome、opera和safari會(huì)忽略padding-right的值視其為0，firefox會(huì)同時(shí)忽略padding-right和padding-bottom，如下圖

在各個(gè)瀏覽器中，對(duì)于滾動(dòng)條本身的渲染也不一樣。它們會(huì)在計(jì)算scrollWidth和scrollHeight時(shí)排除各自的滾動(dòng)條寬度。除了上述的不同，實(shí)際發(fā)現(xiàn)每個(gè)瀏覽器中scrollLeft和scrollTop的最大值也不一樣，甚至差距極大，由于scrollLeft和scrollTop隨滾動(dòng)事件發(fā)生而輸出，博主就上述例子的最大值記錄如下：

實(shí)際上就是由于這些元素屬性在不同瀏覽器中的差異導(dǎo)致scrollWidth和scrollHeight的不同，具體使用應(yīng)格外注意。不過(guò)博主看過(guò)一些資料表示這兩個(gè)屬性和offsetParent有關(guān)，通過(guò)實(shí)際編程發(fā)現(xiàn)它們和offsetParent無(wú)關(guān)，這里不展開(kāi)描述了，因?yàn)榈桶姹緸g覽器，尤其ie7 ie6的實(shí)現(xiàn)方式可能會(huì)比較奇葩。

鼠標(biāo)事件很多，不過(guò)每個(gè)事件中關(guān)于距離的屬性含義是一樣的，這里用mousemove來(lái)講解，具體的內(nèi)容會(huì)在不久之后寫到了js事件部分講解。
鼠標(biāo)實(shí)現(xiàn)對(duì)于現(xiàn)在的瀏覽器來(lái)說(shuō)，實(shí)現(xiàn)都是一樣的了，下面例子都在Chorme中實(shí)現(xiàn)。

鼠標(biāo)事件有以下6對(duì)：

event.clientX：相對(duì)瀏覽器左上角的水平坐標(biāo)
event.clientY：相對(duì)瀏覽器左上角的垂直坐標(biāo)
event.offsetX：相對(duì)于事件源(event.target||event.srcElement)左上角水平偏移
event.offsetY：相對(duì)于事件源(event.target||event.srcElement)左上角垂直偏移
event.pageX：相對(duì)于document左上角的水平坐標(biāo)
event.pageY：相對(duì)于document左上角的垂直坐標(biāo)
event.layerX：相對(duì)于offsetParent左上角的水平偏移
event.layerY：相對(duì)于offsetParent左上角的水平偏移
event.movementX：相對(duì)于前一次事件中screenX的偏移
event.movementY：相對(duì)于前一次事件中screenY的偏移
event.screenX：相對(duì)于屏幕左上角的水平坐標(biāo)
event.screenY：相對(duì)于屏幕左上角的垂直坐標(biāo)
x：和pageX一樣，用于兼容IE8及以前瀏覽器
y：和pageY一樣，用于兼容IE8及以前瀏覽器

總之，還是先看圖

*這個(gè)圖中，黑色實(shí)線邊框表示瀏覽器可視區(qū)域部分，外層藍(lán)色虛線框表示整個(gè)DOM部分,整個(gè)圖為電腦屏幕

圖里面怎么沒(méi)有movementX和movementY?因?yàn)檫@個(gè)事件的值和上一個(gè)事件有關(guān)，關(guān)系如下：

currentEvent.movementX = currentEvent.screenX - previousEvent.screenX
currentEvent.movementY = currentEvent.screenY - previousEvent.screenY

值得注意的時(shí)offsetX和offsetY，他表示鼠標(biāo)到事件源padding左上角的的偏移，這里mousemove事件注冊(cè)在window上，所以位置如圖所示。

當(dāng)瀏覽器的水平滾動(dòng)條滑動(dòng)以后，pageX和clientX就不同了。同理，當(dāng)瀏覽器的垂直滾動(dòng)條滑動(dòng)以后，pageY和clientY就不同了,但它們始終存在以下關(guān)系：

event.pageX = event.clientX + body.scrollLeft;
event.pageY = event.clientY + body.scrollTop;

鼠標(biāo)事件中的距離比元素中的簡(jiǎn)單一些，具體的使用放在之后寫的事件部分。

var $div = $("#div");
$div.width(); //元素寬度，不包括padding和border
$div.height(); //元素高度，不包括padding和border
$div.innerWidth(); //元素內(nèi)寬度，包括padding，不包括border
$div.innerHeight(); //元素內(nèi)高度，包括padding，不包括border
$div.outterWidth(); //元素可見(jiàn)寬度，包括padding和border
$div.outterHeight(); //元素可見(jiàn)高度，包括padding和border
$div.outterWidth(true); //元素全部寬度，包括padding、border和margin
$div.outterHeight(true); //元素全部高度，包括padding、border和margin