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

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

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

先補(bǔ)充一下，本文的測試環(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對：

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

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

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

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

分不清楚？ 看下圖

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

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

第一個值得強(qiáng)調(diào)的是，上面的這個例子中的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;

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

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

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

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

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

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

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

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

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

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

總之，還是先看圖

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

圖里面怎么沒有movementX和movementY?因為這個事件的值和上一個事件有關(guān)，關(guān)系如下：

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

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

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

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

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

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(); //元素可見寬度，包括padding和border
$div.outterHeight(); //元素可見高度，包括padding和border
$div.outterWidth(true); //元素全部寬度，包括padding、border和margin
$div.outterHeight(true); //元素全部高度，包括padding、border和margin