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

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屬性，其實當前div相對誰定位，這個屬性就是誰。根據position值不同，有以下2種情況

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

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

分不清楚？ 看下圖

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

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

第一個值得強調的是，上面的這個例子中的div的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，所以圖中這個div利用position:absolute;相對文檔定位，如果給他添加一個具有position:relative屬性的父div，那么offsetLeft和offsetTop就是下圖這樣：

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

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

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

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

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

實際上就是由于這些元素屬性在不同瀏覽器中的差異導致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;

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

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