鼠標事件
1. 客戶區(qū)坐標位置(clientX/clientY)
通過event事件對象的clientX/clientY屬性,獲得事件發(fā)生時鼠標指針在視口的水平垂直坐標
2. 屏幕坐標位置(screenX/screenY)
通過event事件對象的clientX/clientY屬性,獲得事件發(fā)生時鼠標指針相對于整個屏幕的坐標信息
<body onmousedown="showCoords(event)"></body>
<script>
function showCoords(event){
var input1 = document.getElementsByTagName('input')[0];
var input2 = document.getElementsByTagName('input')[1];
var input3 = document.getElementsByTagName('input')[2];
var input4 = document.getElementsByTagName('input')[3];
input1.value = event.clientX;
input2.value = event.clientY;
input3.value = event.screenX;
input4.value = event.screenY;
}
</script>
3. 頁面坐標位置 (pageX/pageY)
通過事件對象的pageX/pageY屬性可以獲得鼠標事件發(fā)生時鼠標光標相對于整個文檔元素的坐標位置（包含滾動）.在頁面沒有滾動的情況下凡蚜，通常pageX/pageY的值與clientX/clientY的值相等
4. layerX/layerY
事件對象還有個不那么常見的屬性脾猛，那就是layerX/layerY吹由，他是對于絕對定位元素來說的扎即，相對于當前點擊元素的左上角定位的。當頁面上的元素時相對定位（position:relative）的時候茴丰，通常pageX/pageY和layerX/layerY的值是相同的找岖，但是當元素絕對定位(position:absolute)了的時候，layerX/layerY就將鼠標光標位置相對于本身的左上角定位了矛市。
元素
5. 偏移量(offsetWidth/offsetHeight/offsetLeft/offsetTop)
元素的偏移量（offsetLeft/offsetTop）是相對于它的直接父元素來說的。
(元素的可見大小包括滾動條)
offsetWidth = width + padding + border
offsetHeight = height + padding + border
6. 客戶區(qū)的大小(clientWidth/clientHeight)
元素內(nèi)容及其內(nèi)邊距所占空間的大小(滾動條占用的空間不計算在內(nèi))
clientWidth = width + padding
clientHeight = width + padding
7. 滾動大小(scrollWidth/scrollHeight/scrollLeft/scrollTop)
scrollHeight/scrollWidth是整個內(nèi)容區(qū)的實際寬高,即包括了隱藏部分
scrollLeft/scrollTop是出現(xiàn)了橫/縱向滾動條的情況下诲祸，滾動條拉動的距離
有些元素，即使沒有執(zhí)行任何代碼也會自動的添加滾動條而昨，如<html>,但是另外一些元素救氯，則需要通過css的overflow屬性進行設(shè)置才能滾動
帶有垂直滾動條的頁面總高度
document.documentElement.scrollHeight
window
8. window.scrollX/window.scrollY與window.pageXOffset/window.pageYOffset
window.scrollX/window.scrollY返回的是整個文檔document在水平和豎直方向滾動了的距離
window.pageXOffset/window.pageYOffset相當于window.scrollX/window.scrollY的別名一樣的
window.pageXOffset == window.scrollX; // 總是返回真
但在跨瀏覽器的情況下，盡量使用window.pageXOffset/window.pageYOffset比較好
為了保險起見歌憨，使用下面這樣的代碼來判斷文檔在垂直和水平防線滾動的距離比較好：
var x = (window.pageXOffset !== undefined) ? window.pageXOffset
: (document.documentElement || document.body.parentNode || document.body).scrollLeft;
var y = (window.pageYOffset !== undefined) ? window.pageYOffset
: (document.documentElement || document.body.parentNode || document.body).scrollTop;
關(guān)于獲取滾動條高度的問題
有三種方式:
document.body.scrollTop
document.documentElement.scrollTop //在chrome有bug,需要進行判斷
window.pageYOffset
三種方式都可以,但是pageYOffset在IE下會有兼容性問題
參考: http://blog.csdn.net/wl110231/article/details/8542722
9. window.innerHeight/window.innerWidth
window.innerHeight/window.innerWidth記錄了視口內(nèi)文檔元素的實際高度和寬度着憨，實際上還有window.outerHeight/window.outerWidth
如果頁面中有frameset
var intFrameHeight = window.innerHeight; // or
var intFrameHeight = self.innerHeight;
// will return the height of the frame viewport within the frameset
var intFramesetHeight = parent.innerHeight;
// will return the height of the viewport of the closest frameset
var intOuterFramesetHeight = top.innerHeight;
// will return the height of the viewport of the outermost frameset
10. getBoundingClientRect()方法
getBoundingClientRect用于獲得頁面中某個元素的左，上务嫡，右和下分別相對瀏覽器視窗的位置甲抖。getBoundingClientRect是DOM元素到瀏覽器可視范圍的距離（不包含文檔卷起的部分）。該函數(shù)返回一個Object對象心铃，該對象有6個屬性：top,lef,right,bottom,width,height准谚；這里的top、left和css中的理解很相似去扣，width柱衔、height是元素自身的寬高，但是right愉棱，bottom和css中的理解有點不一樣唆铐。right是指元素右邊界距窗口最左邊的距離，bottom是指元素下邊界距窗口最上面的距離奔滑。
通過這個方法可以比較方便的獲取頁面元素的位置：
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
