快捷導(dǎo)航

js Event對象的5種坐標(biāo)

更新時間：2011年09月12日 14:08:34 作者：

使用鼠標(biāo)事件經(jīng)常碰到這樣的需求，比如獲取鼠標(biāo)相對于事件源的位置，鼠標(biāo)相對于事件源對象父元素的位置

但是你懂的，瀏覽器實在太不和諧了，兼容性且不說，各種坐標(biāo)屬性看得人頭昏眼花，極容易混淆。好吧，我來總結(jié)一下：

測試瀏覽器：IE8, Chrome13, FF8, Safari5, Opera11
先上測試用例（用HTML5的doctype測試，也可看出未來的發(fā)展趨勢，其他doctype可自行測試）：

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

 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
<style type="text/css"> 
html { 
background:red; 
} 
body { 
background:green; 
} 
#null { 
height:1000px; 
} 
#btn { 
cursor:default; 
background:blue; 
width:50px; 
height:30px; 
line-height:30px; 
text-align:center; 
} 
</style> 
</head> 
<body> 
<div id='null'>空白區(qū)</div> 
<div id="btn">點擊</div><!-- 按鈕用DIV是因為原生按鈕有圓角，不確定邊界 --> 
</body> 
<script type="text/javascript"> 
window.onload = function(){ 
var btn = document.getElementById('btn'); 
btn.onclick = function(e){ 
e = e|| window.event; 
var box = (e.target || e.srcElement).getBoundingClientRect(), 
offsetX = e.clientX - box.left, 
offsetY = e.clientY - box.top; 
p('x: '+ e.x+', y: '+e.y); 
p('pageX: '+ e.pageX+', pageY: '+e.pageY); 
p('offsetX: '+ e.offsetX+', offsetY: '+e.offsetY); 
p('FF實現(xiàn) offsetX: '+offsetX+', offsetY: '+offsetY); 
p('layerX: '+ e.layerX+', layerY: '+e.layerY); 
p('clientX: '+ e.clientX+', clientY: '+e.clientY); 
p('body.scrollLeft: '+ document.body.scrollLeft+', body.scrollTop: '+document.body.scrollTop); 
p('body.clientLeft: ' + document.body.clientLeft + ', body.clientTop: '+document.body.clientTop); 
p('documentElement.scrollLeft: '+ document.documentElement.scrollLeft+', documentElement.scrollTop: '+document.documentElement.scrollTop); 
p('documentElement.clientLeft: ' + document.documentElement.clientLeft + ', documentElement.clientTop: '+document.documentElement.clientTop); 
} 
} 
function p(s){ 
console.log(s); 
} 
</script> 
</html> 

問：怎樣獲取鼠標(biāo)相對于瀏覽器可視文檔區(qū)域左上角的位置？
答：x, y和clientX, clientY皆可，但是x, y在IE下表示鼠標(biāo)相對于文檔開頭的位置（即如果有滾到條的話，會計算在內(nèi)），還有FF也不支持x, y
　　推薦： clientX, clientY

問：怎樣獲取鼠標(biāo)相對于文檔開頭的位置？
答： IE：使用x, y（前提是事件源的父元素（一直到documentElement）沒有設(shè)置position:relative之類的，否則相對于最近元素，而非相對于文檔）
　　非IE：使用pageX, pageY
　　layerX, layerY其實也可以，但是IE和Opera不支持！
　　那么如何確保IE正常取值呢？答：event.clientX + document.documentElement.scrollLeft,　　event.clientY + document.documentElement.scrollTop

問：怎樣獲取鼠標(biāo)相對于事件源(event.target||event.srcElement)左上角的位置？
答：offsetX, offsetY。但是FF不支持，怎樣辦呢？
　　1. 先獲取鼠標(biāo)相對于瀏覽器可視文檔區(qū)域左上角的位置
　　2. 然后獲取事件源相對于瀏覽器可視文檔區(qū)域左上角的位置
　　3. 相減，收工
也許有人會問，這第2步怎么做??？好吧，好人做到底！
HTMLElement.getBoundingClientRect()方法
返回值為：{top:xx, right:xx, bottom:xx, left:xx, width:xx, height:xx}
也就是說，一個元素的位置信息都給了，我們要做的就是:

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

 
var box = (e.target || e.srcElement).getBoundingClientRect(), 
offsetX = e.clientX - box.left, 
offsetY = e.clientY - box.top; 

經(jīng)測試，所有瀏覽器都和event.offsetX, event.offsetY保持一致（當(dāng)然FF除外）

我的例子中，最后還檢測了scrollLeft, scrollTop, clientLeft, clientTop，本來以為它們幾個會作怪，可測試結(jié)果表明：
除了scrollTop，其他都是0（當(dāng)然scrollLeft是因為沒出現(xiàn)橫向滾動條所致）
scrollTop各瀏覽器表現(xiàn)不盡相同，如下：
body.scrollTop的情況
　　IE, FF, Opera：0
　　Chrome, Safari：向上滾動的距離
documentElement.scrollTop的情況
　　IE, FF, Opera：向上滾動的距離
　　Chrome, Safari：0

您可能感興趣的文章: