一：滑鼠尺寸類樣式

都要事件物件的配合

Tip:注意與瀏覽器及元素尺寸分開，滑鼠類尺寸樣式都是X,Y，瀏覽器及元素的各項尺寸時Height,Width

1：檢測相對於瀏覽器的位置:event.clientX/event.clientY

client:整個瀏覽器的可視區域,當點選滑鼠的時候，滑鼠事件發生的位置距離瀏覽器可視區域的左邊和上邊的距離
clientX:滑鼠事件發生的位置距離瀏覽器可視區域的左邊的距離
clientY:滑鼠事件發生的位置距離瀏覽器可視區域的上邊的距離

2：檢測相對於螢幕的位置event.screenX/event.screenY

screen:整個螢幕的大小，當滑鼠點選的時候，滑鼠事件發生的位置相對於螢幕的左邊和上邊的距離
event.screenX：滑鼠事件發生的位置距離螢幕左邊的距離
event.screenY:滑鼠事件發生的位置距離螢幕上邊的距離
 

3：檢測相對於事件源的位置：event.offsetX/event.offsetY

Tip：注意這個事件源的模型，offset的檢測是不包括邊框的大小的，但是包括內邊距，如果邊框的大小為10px,那麼最左邊的X的距離為-10；

offset:相對於事件源，當滑鼠事件發生時，相對於發生事件的事件源的左邊的距離和上邊的距離
event.offsetX:當滑鼠事件發生時，相對於發生事件的事件源的左邊的距離
event.offsetY:當滑鼠事件發生時，相對於發生事件的事件源的上邊的距離

4:檢測相對於文件的位置：event.pageX/event.pageY

Tip:這個文件指的這個頁面，頁面在不發生滾動的情況下，瀏覽器的可視區域等於文件的可視區域，這個時候event.clientX = event.offetX

一旦頁面發生了滾動，那麼滾動消失的距離，page是可以檢測來的，這時候event.cientX 與 event.pageX的距離是不相等的

page:頁面文件，當頁面發生了滾動的，早上文件頂部隱藏了一部分，pageX的距離還是從文件最頂的距離開始檢測的
pageX:當滑鼠事件發生時，滑鼠相對於文件左邊的位置(IE7，8沒有)
pageY:當滑鼠事件發生時，滑鼠相對於文件上邊的位置(IE7，8沒有)

東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全https://55wd.com

二：瀏覽器及元素各項尺寸

offsetParent:獲取元素的最近的具有定位屬性的父元素

1:元素.offsetWidth/元素.offsetHeight:元素的實際寬高

Tip:元素的實際寬高是包括邊框的，指的是這個元素的全部

offset：針對元素的
offsetWidth:元素的寬度
offsetHight：元素的高度

2：元素.offsetLeft/元素.offsetTop,針對具有定位屬性的父元素的左邊和上邊的距離

Tip:從邊框的邊緣開始檢測的

offset:針對元素的
offsetLeft:元素對於具有定位屬性的父元素的左邊距
offsetTop:元素對於具有定位屬性的父元素的上邊距

3：元素.clientWidth/元素.clientHeight

client：不包括元素的邊框
clientWidth:元素的可視寬度
clientHeight:元素的可視高度

4：元素.clientLeft/元素.clientTop

cilentLeft:當前元素的左邊框的大小

clientTop:當前元素的上邊框的大小

5：元素.scrollHeight/元素.scrollwidth

cilentLeft:當前元素的左邊框的大小

clientTop:當前元素的上邊框的大小

6：元素scrollTop/元素.scrollLeft

scrollTop:滾動條最頂端和可見內容的最頂端的距離

scrollLeft:滾動條最左端和可見內容的最左邊的距離