一、關於鼠標位置的屬性
1. 觸發鼠標事件的區域
盒子模型中的border,padding,content區域會觸發鼠標事件,點擊margin區域將不觸發鼠標事件。
2. 鼠標事件對象MouseEvent下的屬性
[a]. evt.pageX/Y ：以頁面左上角為參考點，表示當前觸發點離頁面左上角的水平和垂直距離。
注意：1. IE5.5~8不支持該屬性，polyfill方法pageX = clientX + scrollLeft
2. 頁面左上角並不是指html或body標簽的盒子模型border外邊框的左上角，而是document的左上角，是不能通過css來調整位置的。
[b]. evt.clientX/Y ：以可視區域左上角為參考點，表示當前觸發點離可視區域左上角的水平和垂直距離。
注意：所有瀏覽器均支持
[c]. evt.offsetX/Y ：以觸發點所在dom的左上角為參考點，表示當前觸發點離觸發點所在dom的左上角的水平和垂直距離。
注意：1. Chrome下將以dom的border外邊框的左上角作為參考點;
2. IE5.5~9下將以dom的content的左上角作為參考點;
3. FF不支持該屬性
[d]. evt.screenX/Y ：以屏幕左上角為參考點，表示當前觸發點離屏幕左上角的水平和垂直距離。
注意：所有瀏覽器均支持
[e]. evt.layerX/Y ：當觸發點所在的dom的position為relative或absolute時，則以dom的border外邊框的左上角作為參考點，否則就以頁面左上角為參考點(與pageX一致了)。
注意：IE5.5~8不支持
二、關於元素位置的屬性
1. HTMLElement.clientLeft/Top ：元素左border的寬度和上border的高度。
2. HTMLElement.clientWidth/Height ：元素content+padding-滾動條的寬度或高度。
3. HTMLElement.offsetWidth/Height ：元素content+padding+border的寬度或高度。
4. HTMLElement.scrollLeft/Top ：元素水平、垂直滾動條切去的寬度或高度。
注意：FF在W3C標准模式下,
document.documentElement.scrollLeft/Top獲取頁面滾動條切去的部分;W3C怪異模式下，則采用body.scrollLeft/Top來獲取
5. HTMLElement.offsetParent ：最近一個已進行CSS定位的祖先元素。
6. HTMLElement.offsetTop/Left ：元素border外邊框的左上角離offsetParent的padding外邊框的左上角的垂直、水平距離。若offsetParent為body或 html標簽，且body的position不為relative或absolute時，offsetTop/Left為元素border外邊框的左上角 離頁面左上角的垂直、水平距離。若body的position為relative或absolute時，則為元素border外邊框的左上角離 offsetParent的padding外邊框的左上角的垂直、水平距離。
注意：IE,FF,Chrome下，怪異模式和標准模式的最頂層offsetParent均為body元素，body.offsetParent和document.documentElement.offsetParent均為null。
三、總結
在寫拖拽層和polyfill html5特性placeholder時，上述內容為基礎知識，同時會減少很多不必要的代碼。
尊重原創，轉載請注明來自： http://www.cnblogs.com/fsjohnhuang/p/3999186.html ^_^肥仔John