DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript中獲取鼠標位置相關屬性總結
JavaScript中獲取鼠標位置相關屬性總結
編輯:關於JavaScript     

javascript並沒有mouse對象,獲取鼠標坐標要靠強大的event對象。

我們通過監聽document的mousemove,就可以實時獲得鼠標位置。

但是!!event中和鼠標相關的屬性太多了,很讓人頭大!如下:

event.layerX event.layerY event.clientX event.clientY event.pageX event.pageY event.offsetX event.offsetY event.screenX event.screenY event.x event.y

共計6組!

而且他們的區別並不明顯,各浏覽器間還不兼容!

這篇文章的目的就是搞清楚他們的區別,以及選出那些不推薦使用的。

測試代碼

直接運行下列代碼:
復制代碼 代碼如下:
<!DOCTYPE html><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta charset="utf-8" /></p>
<style>
body {position:relative;}
 div {min-height: 300px; background-color: #eee;}
 #jg {right: 0; top: 10px; position: fixed; background-color: #f00;}
</style>
<p></head><br />
<body><br />
<span id="jg">顯示結果</span><br />
<input type="button" value="一個按鈕" /></p>
<div>屏內div</div>
<div style="height:1000px; width:2000px; background:#ddd;">很高很寬。。。</div>
<div>屏外DIV</div>
<p></body><br />
<script>
var jg = document.getElementById('jg');
document.onmousemove = function  (e) {
 e = e || window.event;
 jg.innerHTML = 'layerX:'+e.layerX+
     ',layerY:'+e.layerY+
     ', <br/>clientX:'+e.clientX+
     ',clientY:'+e.clientY+
     ', <br/>pageX:'+e.pageX+
     ',pageY :'+e.pageY+
     ',<br/>offsetX:'+e.offsetX+
     ',offsetY:'+e.offsetY+
     ',<br/>screenX:'+e.screenX+
     ',screenY:'+e.screenY+
     ',<br/>x:'+e.x+
     ',y:'+e.y;
}
</script><br />
</html>

測試過程中發現一個神器:chrome(谷歌浏覽器)和IE9全兼容以上所有屬性!用來比較他們就非常方便了。

經過對比,結果如下:

各屬性釋義

clientX與Y,是鼠標相對於浏覽器視口(即滾動條之外的部分忽略掉)的坐標;所有浏覽器都支持。

screenX與Y,是鼠標相對於整個屏幕左邊(頂邊)的坐標,基本與document脫節了;全兼容。

offsetX與Y,是鼠標相對於當前所指向對象的坐標,鼠標此時指向按鈕,則offsetX是相對於這個按鈕;firefox不支持

x與y,同標准浏覽器的layerX與Y,是IE中可以用來代替layerX的屬性

pageX與Y,是鼠標相對於整個頁面左邊(頂邊)的坐標,包括視口之外的;IE7,8不支持。

重點:layerX與layerY

layerX與Y是標准浏覽器出的新屬性,IE9也支持。他可以用來代替offsetX與Y.但是,他的定義為:相對於當前指向元素最近的有定位信息的元素的坐標。這個“有定位”是指有非默認定位的css屬性(即非static)。

如果,當前指向的元素就有定位,那麼layerX與Y就返回相對於此元素的坐標;否則,就查看此元素的父標簽;還是沒有定位的話,就繼續;一直到根元素——html節點。

所以,在firefox中,想要offsetX值,就必須加入position定位信息!

兼容性總結:

1,firefox不支持offsetX,offsetY與x,y屬性,但完全可以用layerX代替他們;
2,ie中的x,y相當於firefox&chrome中的layerX與layerY;
3,ie7,8的document的邊界與浏覽器窗口的邊界有2px的距離,所以在窗口最大化時screenX最小都有2px;
4,ie9中的layerX與Y,雖然有值,但卻莫名其妙的不正確,貌似與html標簽有關,比如我的例子的代碼,把滾動條拖到最右邊,鼠標從空白慢慢移動到大DIV上,此時大DIV的最右邊與第一個DIV的最右邊的差值也會算進layerX中。。。後頭元素越來越多,這個計算就越復雜;而firefox與chrome的layerX則沒有這個問題。所以,不要在IE9中使用layerX.
5,在chrome中,x與y雖然有值,但是是和clientX與Y完全相同! 所以,不建議使用x,y屬性。

兼容性補救

標准浏覽器中可以用position與event.layerX配合來實現event.offsetX屬性;

IE7,8中沒有pageX,pageY,只有用document.documentElement.scrollLeft+event.clientX來求出。

所以,IE中的x,y或者offsetX,offsetY可以去掉一個了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved