IT工程師數位筆記本

一、關于鼠標位置的屬性　　　　　　　　　　　　　　　　　　　　　　　　

  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