快捷導(dǎo)航

JavaScript中獲取鼠標(biāo)位置相關(guān)屬性總結(jié)

更新時(shí)間：2014年10月11日 11:14:02 作者：十年燈

這篇文章主要介紹了JavaScript中獲取鼠標(biāo)位置相關(guān)屬性總結(jié),本文重點(diǎn)在搞清楚這些屬性的區(qū)別,需要的朋友可以參考下

javascript并沒有mouse對(duì)象，獲取鼠標(biāo)坐標(biāo)要靠強(qiáng)大的event對(duì)象。

我們通過監(jiān)聽document的mousemove，就可以實(shí)時(shí)獲得鼠標(biāo)位置。

但是?。vent中和鼠標(biāo)相關(guān)的屬性太多了，很讓人頭大！如下：

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

共計(jì)6組！

而且他們的區(qū)別并不明顯，各瀏覽器間還不兼容！

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

測(cè)試代碼

直接運(yùn)行下列代碼：

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

<!DOCTYPE html><br />
<html xmlns=" />
<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">顯示結(jié)果</span><br />
<input type="button" value="一個(gè)按鈕" /></p>
<div>屏內(nèi)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>

測(cè)試過程中發(fā)現(xiàn)一個(gè)神器：chrome(谷歌瀏覽器)和IE9全兼容以上所有屬性！用來比較他們就非常方便了。

經(jīng)過對(duì)比，結(jié)果如下：

各屬性釋義

clientX與Y，是鼠標(biāo)相對(duì)于瀏覽器視口（即滾動(dòng)條之外的部分忽略掉）的坐標(biāo)；所有瀏覽器都支持。

screenX與Y，是鼠標(biāo)相對(duì)于整個(gè)屏幕左邊（頂邊）的坐標(biāo)，基本與document脫節(jié)了；全兼容。

offsetX與Y，是鼠標(biāo)相對(duì)于當(dāng)前所指向?qū)ο蟮淖鴺?biāo)，鼠標(biāo)此時(shí)指向按鈕，則offsetX是相對(duì)于這個(gè)按鈕；firefox不支持

x與y，同標(biāo)準(zhǔn)瀏覽器的layerX與Y，是IE中可以用來代替layerX的屬性

pageX與Y，是鼠標(biāo)相對(duì)于整個(gè)頁面左邊（頂邊）的坐標(biāo)，包括視口之外的；IE7，8不支持。

重點(diǎn)：layerX與layerY

layerX與Y是標(biāo)準(zhǔn)瀏覽器出的新屬性，IE9也支持。他可以用來代替offsetX與Y.但是，他的定義為：相對(duì)于當(dāng)前指向元素最近的有定位信息的元素的坐標(biāo)。這個(gè)“有定位”是指有非默認(rèn)定位的css屬性（即非static）。

如果，當(dāng)前指向的元素就有定位，那么layerX與Y就返回相對(duì)于此元素的坐標(biāo)；否則，就查看此元素的父標(biāo)簽；還是沒有定位的話，就繼續(xù)；一直到根元素——html節(jié)點(diǎn)。

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

兼容性總結(jié)：

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

兼容性補(bǔ)救

標(biāo)準(zhǔn)瀏覽器中可以用position與event.layerX配合來實(shí)現(xiàn)event.offsetX屬性；

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

所以，IE中的x,y或者offsetX,offsetY可以去掉一個(gè)了。