鼠標(biāo)事件的screenY,pageY,clientY,layerY,offsetY屬性詳解

更新時間：2015年03月12日 10:33:49 投稿：hebedich

這篇文章主要介紹了鼠標(biāo)事件的screenY,pageY,clientY,layerY,offsetY屬性詳解,需要的朋友可以參考下

screenY

鼠標(biāo)相對于顯示器屏幕左上角的偏移

pageY

鼠標(biāo)相對于頁面左上角的偏移 (其值不會受滾動條的影響)

IE9之下并不支持這個屬性

但是可以寫點(diǎn)代碼計(jì)算出來。 jQuery中的實(shí)現(xiàn)：

復(fù)制代碼代碼如下:

 // 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  || 0 );

 }

簡單點(diǎn)實(shí)現(xiàn)就是。

鼠標(biāo)相對于瀏覽器視口的偏移加上文檔的滾動條隱藏的高度減去文檔的clientTop.

復(fù)制代碼代碼如下:

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

為何要減去document.documentElement.clientTop

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

在iE7下測試，得到

復(fù)制代碼代碼如下:

 document.documentElement.clientTop --> 2px  document.documentElement.clientLeft --> 2px

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

clientY

鼠標(biāo)相對于瀏覽器視口左上角的偏移

注意clientY和pageY的區(qū)別，clientY在頁面無滾動條的情況下值等同于pageY

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

layerY

如果元素的position樣式不是默認(rèn)的static,我們說這個元素具有定位屬性。

在當(dāng)前觸發(fā)鼠標(biāo)事件的元素和它的祖先元素中找到最近的具有定位屬性的元素，計(jì)算鼠標(biāo)與其的偏移值，以找到元素的border的左上角的外交點(diǎn)作為相對點(diǎn)。如果找不到具有定位屬性的元素，那么就相對于當(dāng)前頁面計(jì)算偏移，此時等同于pageY。

IE9之下并不支持這個屬性，但是可以用其特有的offsetY替換

offsetY

　　 IE專有的屬性

offsetY和layerY的不同在于，前者的在計(jì)算偏移值時，相對于元素的border左上角的內(nèi)交點(diǎn)，因此當(dāng)鼠標(biāo)位于元素的border上時，偏移值是一個負(fù)值。另外offsetY并不在乎觸發(fā)事件的元素是否有定位屬性，它總是相對于觸發(fā)事件的元素來計(jì)算偏移值。

　　鑒于layerY和offsetY的不同，要兼容的使用二者要注意

　　1.觸發(fā)事件的元素一定要設(shè)置定位屬性。

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

復(fù)制代碼代碼如下:

 //這里的element.borderTopWidth必須是實(shí)際計(jì)算出的元素的上邊框?qū)挾取?br />
 var borderTopWidth =  window.getComputedStyle ? window.getComputedStyle(element,null).borderTopWidth: element.currentStyle.borderTopWidth; 

 var offsetY = event.offsetY||(event.layerY + borderTopWidth);

通過layerY和offsetY屬性，可以很方便的計(jì)算鼠標(biāo)相對于綁定鼠標(biāo)事件元素的偏移，這在某些時候非常有用。

這里詳細(xì)說了鼠標(biāo)豎直方向的偏移屬性，水平方向的偏移類似,不再討論。

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

您可能感興趣的文章: