avaScript中g(shù)etBoundingClientRect()方法詳解
getBoundingClientRect()
這個方法返回一個矩形對象火诸，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。
var box=document.getElementById('box'); // 獲取元素
alert(box.getBoundingClientRect().top); // 元素上邊距離頁面上邊的距離
alert(box.getBoundingClientRect().right); // 元素右邊距離頁面左邊的距離
alert(box.getBoundingClientRect().bottom); // 元素下邊距離頁面上邊的距離
alert(box.getBoundingClientRect().left); // 元素左邊距離頁面左邊的距離
注意：IE欠雌、Firefox3+、Opera9.5苛萎、Chrome桨昙、Safari支持检号，在IE中腌歉，默認坐標從(2,2)開始計算，導致最終距離比其他瀏覽器多出兩個像素齐苛，我們需要做個兼容翘盖。
document.documentElement.clientTop; // 非IE為0，IE為2
document.documentElement.clientLeft; // 非IE為0凹蜂，IE為2
functiongGetRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
return{
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
分別加上外邊據(jù)馍驯、內(nèi)邊距、邊框和滾動條玛痊，用于測試所有瀏覽器是否一致汰瘫。
滾輪事件
onmouseWheel
DOMMousWheel 火狐
觸摸事件
touchstart
touchmove
touchend
.....
鍵盤 和文本事件
keydown
keypress
keyup
其中可以利用keyCode返回鍵碼
DOM3級別中有一個textInput事件利用event.data返回按鍵值
h5事件
contextmenu右擊事件 冒泡事件
