鼠標(biāo)事件屬性詳解
學(xué)前端的小伙伴們你們對(duì)數(shù)表事件有多少了解?跟著學(xué)習(xí)啦小編一起學(xué)習(xí)一下鼠標(biāo)事件吧
鼠標(biāo)事件的screenY,pageY,clientY,layerY,offsetY屬性詳解
screenY
鼠標(biāo)相對(duì)于顯示器屏幕左上角的偏移
pageY
鼠標(biāo)相對(duì)于頁(yè)面左上角的偏移 (其值不會(huì)受滾動(dòng)條的影響)
IE9之下并不支持這個(gè)屬性
但是可以寫(xiě)點(diǎn)代碼計(jì)算出來(lái)。 jQuery中的實(shí)現(xiàn)：
代碼如下:
// 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 );
}
簡(jiǎn)單點(diǎn)實(shí)現(xiàn)就是。
鼠標(biāo)相對(duì)于瀏覽器視口的偏移加上文檔的滾動(dòng)條隱藏的高度減去文檔的clientTop.
代碼如下:
var pageY = event.clientY +document.documentElement. scrollTop-document.documentElement.clientTop
為何要減去document.documentElement.clientTop
這是IE8之下瀏覽器特有的文檔的偏移，即使設(shè)置html,body的padding和margin為0也不會(huì)影響其值。
在iE7下測(cè)試，得到
代碼如下:
document.documentElement.clientTop --> 2px document.documentElement.clientLeft --> 2px
document.bocy.clientTop --> 0px document.body.clientLeft --> 0px
clientY
鼠標(biāo)相對(duì)于瀏覽器視口左上角的偏移
注意clientY和pageY的區(qū)別，clientY在頁(yè)面無(wú)滾動(dòng)條的情況下值等同于pageY
----------------------------------分割-----------------------------------------------
layerY
如果元素的position樣式不是默認(rèn)的static,我們說(shuō)這個(gè)元素具有定位屬性。
在當(dāng)前觸發(fā)鼠標(biāo)事件的元素和它的祖先元素中找到最近的具有定位屬性的元素，計(jì)算鼠標(biāo)與其的偏移值，以找到元素的border的左上角的外交點(diǎn)作為相對(duì)點(diǎn)。如果找不到具有定位屬性的元素，那么就相對(duì)于當(dāng)前頁(yè)面計(jì)算偏移，此時(shí)等同于pageY。
IE9之下并不支持這個(gè)屬性，但是可以用其特有的offsetY替換
offsetY
IE專有的屬性
offsetY和layerY的不同在于，前者的在計(jì)算偏移值時(shí)，相對(duì)于元素的border左上角的內(nèi)交點(diǎn)，因此當(dāng)鼠標(biāo)位于元素的border上時(shí)，偏移值是一個(gè)負(fù)值。 另外offsetY并不在乎觸發(fā)事件的元素是否有定位屬性，它總是相對(duì)于觸發(fā)事件的元素來(lái)計(jì)算偏移值。
鑒于layerY和offsetY的不同，要兼容的使用二者要注意
1.觸發(fā)事件的元素一定要設(shè)置定位屬性。
2.在元素具有上邊框border-top的情況下， layerY比offsetY的值多一個(gè)border-top的寬度值。
代碼如下:
//這里的element.borderTopWidth必須是實(shí)際計(jì)算出的元素的上邊框?qū)挾取?/p>
var borderTopWidth = window.getComputedStyle ? window.getComputedStyle(element,null).borderTopWidth: element.currentStyle.borderTopWidth;
var offsetY = event.offsetY||(event.layerY + borderTopWidth);
通過(guò)layerY和offsetY屬性，可以很方便的計(jì)算鼠標(biāo)相對(duì)于綁定鼠標(biāo)事件元素的偏移，這在某些時(shí)候非常有用。
這里詳細(xì)說(shuō)了鼠標(biāo)豎直方向的偏移屬性，水平方向的偏移類似,不再討論。
鼠標(biāo)事件相關(guān)文章：