滑鼠事件的screenY,pageY,clientY,layerY,offsetY屬性詳解_javascript技巧

screenY

         滑鼠相對於顯示器螢幕左上角的偏移

pageY

         滑鼠相對於頁面左上角的偏移 (其數值不會受捲軸的影響)

         IE9之下並不支援這個屬性

         但是可以寫點程式碼計算。 jQuery中的實作：

複製程式碼 程式碼如下:

 // Calculate pageX/Y if missing and clientX/Y available
 if ( event.pageX == null && original.clientX != null ) {
     eventDoc = event.target.ownerDocument || document;
     doc = eventDoc.documentElement;
     body = eventDoc.body;
     event.pageX = original.clientX ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft||body&&body.clientLeft || 0 );
     event.pageY = original.clientY ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop);  }   

簡單點實作就是。 

滑鼠相對於瀏覽器視窗的偏移加上文件的捲軸隱藏的高度減去文件的clientTop.

複製程式碼 程式碼如下:

var pageY = event.clientY document.documentElement. scrollTop-document.documentElement.clientTop

為何要減去document.documentElement.clientTop

這是IE8之下瀏覽器特有的文檔的偏移，即使設定html,body的padding和margin為0也不會影響其值。

在iE7下測試，得到                              

複製程式碼 程式碼如下:

 document.documentElement.clientTop --> 2px  document.documentElement.clientLeft --> 2px
 document.bocy.clientTop --> 0px  document.body.clientLeft --> 0px

clientY

         滑鼠相對於瀏覽器視窗左上角的偏移量

         注意clientY和pageY的區別，clientY在頁面無捲軸的情況下值等同於pageY

----------------------------------分割------------ -----------------------------------

layerY

         如果元素的position樣式不是預設的static,我們說這個元素具有定位屬性。

         在目前觸發滑鼠事件的元素和它的祖先元素中找到最近的具有定位屬性的元素，計算滑鼠與其的偏移值，以找到元素的border的左上角的外交點作為相對點。如果找不到具有定位屬性的元素，那麼就相對於目前頁面計算偏移，此時等同於pageY。

         IE9之下並不支援此屬性，但可以用其獨特的offsetY取代

offsetY  

 　　  IE專有的屬性

         offsetY和layerY的差異在於，前者的在計算偏移值時，相對於元素的border左上角的內交點，因此當滑鼠位於元素的border上時，偏移值是負值。 另外offsetY並不在乎觸發事件的元素是否有定位屬性，它總是相對於觸發事件的元素來計算偏移值。

　　   鑑於layerY和offsetY的不同，要相容的使用二者要注意

         　　1.觸發事件的元素一定要設定定位屬性。

        　　 2.在元素具有上邊框border-top的情況下，多一個border-top的寬度值在 layerY比offsetY的值。

複製程式碼 程式碼如下:

 //這裡的element.borderTopWidth必須是實際計算出來的元素的上邊框寬度。
 var borderTopWidth =  window.getComputedStyle ? window.getComputedStyle(element,null).borderTopWidth: element.currentStyle.borderTopWidth;
 var offsetY = event.offsetY||(event.layerY borderTopWidth);

透過layerY和offsetY屬性，可以很方便的計算滑鼠相對於綁定滑鼠事件元素的偏移，這在某些時候非常有用。   

這裡詳細說了滑鼠垂直方向的偏移屬性，水平方向的偏移類似,不再討論。

以上就是本文的全部內容了，希望大家能夠喜歡。