在編寫(xiě)JavaScript代碼時(shí)慎框，經(jīng)常會(huì)需要獲得鼠標(biāo)或者某個(gè)盒子的相對(duì)坐標(biāo)，這里我們就簡(jiǎn)要介紹一下幾種獲取方法的不同后添。
關(guān)于鼠標(biāo)坐標(biāo)
鼠標(biāo)坐標(biāo)一般是用event事件獲取鲤脏，其中有以下幾個(gè)方法：
- pageX , pageY
- *screenX , *screenY
- *clientX , *clientY
其中以pageX , pageY方法使用得較多，其他的方法則不太常使用（*標(biāo)明）吕朵。
一張圖說(shuō)明三者的區(qū)別：
如圖?
pageX是指光標(biāo)相對(duì)于該網(wǎng)頁(yè)的水平位置（網(wǎng)頁(yè)實(shí)際大小），以當(dāng)前文檔的左上角為基準(zhǔn)點(diǎn)窥突。
screenX是指光標(biāo)相對(duì)于該屏幕的水平位置（電腦屏幕）努溃，當(dāng)前屏幕的左上角為基準(zhǔn)點(diǎn)。
clientX是指光標(biāo)相對(duì)于瀏覽器的水平位置 （當(dāng)前可見(jiàn)區(qū)域）阻问，當(dāng)前窗口的左上角為基準(zhǔn)點(diǎn)梧税。
所以我們?nèi)绾潍@取鼠標(biāo)坐標(biāo)？根據(jù)自己的需求來(lái)調(diào)用這些方法就行了~
...
var x = event.pageX;
var y = event.pageY;
...
兼容性
說(shuō)到兼容性，有兩點(diǎn)要注意的是：
- pageX , pageY 在ie 6第队、7中不支持哮塞。
- 普通瀏覽器支持 event（任意參數(shù)）
ie 678 支持 window.event（內(nèi)置，無(wú)參）
第一點(diǎn)這里我就不說(shuō)了凳谦，有興趣的可以自己研究一下忆畅。
主要談一下第二點(diǎn)：
要想在ie和其他瀏覽器中都支持event事件，就要使用兼容性寫(xiě)法尸执。
代碼如下：
document.onclick() = function (event) {
event = event || window.event;
}
關(guān)于盒子坐標(biāo)
這里介紹兩種常用的獲取盒子坐標(biāo)的方法：
- offsetLeft
- style.left
看起來(lái)它們都是獲取當(dāng)前盒子的 left 值家凯，但是卻有很大不同：
- offsetLeft 可以返回沒(méi)有定位盒子的距離左側(cè)的位置，而 style.left 不可以如失。
- offsetTop 返回的是數(shù)字绊诲，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px褪贵。
- offsetTop 只讀掂之，而 style.top 可讀寫(xiě)。（只讀是獲取值脆丁，可寫(xiě)是賦值）
- 如果沒(méi)有給 HTML 元素指定過(guò) top 樣式世舰，則style.top 返回的是空字符串。
- 對(duì)于 offsetLeft 偎快，是從父盒子的padding 開(kāi)始算冯乘，border不算，父親沒(méi)有定位則以body為準(zhǔn)晒夹。
案例
關(guān)于這些應(yīng)用的案例裆馒，可以參考我的另外一篇文章 放大器實(shí)現(xiàn)，有對(duì)這些方法的部分運(yùn)用丐怯。
