js中滑鼠事件和距離屬性的介紹

本篇文章給大家帶來的內容是關於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 value	chrome	Firefox	opera	safari	IE11
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