摘要：入門(mén)系列之位置及相對(duì)位置事件坐標(biāo)寫(xiě)過(guò)代碼的一般都知道，在頁(yè)面操作中，坐標(biāo)概念是一個(gè)很重要的概念，幾乎所有的頁(yè)面交互都牽扯到坐標(biāo)的概念。，及表示的是事件觸發(fā)點(diǎn)相對(duì)于事件發(fā)生所在節(jié)點(diǎn)左上角的位置。我們可以通過(guò)獲取到元素相對(duì)于文檔的位置信息。

位置及相對(duì)位置事件坐標(biāo)

寫(xiě)過(guò)代碼的一般都知道，在頁(yè)面操作中，坐標(biāo)概念是一個(gè)很重要的概念，幾乎所有的頁(yè)面交互都牽扯到坐標(biāo)的概念。尤其是在游戲中， 坐標(biāo)概念更是制作游戲的最基本概念之中，不了解或者不清楚坐標(biāo)概念，那么辛辛苦苦做的游戲可能淪為一個(gè)動(dòng)畫(huà)。對(duì)于在寫(xiě)js的時(shí)候，清晰地了解并能區(qū)分坐標(biāo)概念是一件很重要的事，尤其是在js事件中的多種坐標(biāo)。下面我們舉個(gè)例子來(lái)了解一下:

如圖所示，我們監(jiān)聽(tīng)點(diǎn)擊testDiv與點(diǎn)擊文檔的事件，我們可以在控制臺(tái)觀察輸出的event信息。

在chrome瀏覽器下，所打印出的event信息中至少有6中關(guān)于坐標(biāo)的信息，下面我們就仔細(xì)來(lái)談?wù)劯鱾€(gè)坐標(biāo)信息的含義以及應(yīng)用場(chǎng)合，做一個(gè)完整的位置信息文檔~

clientX，clienY
clientX以及clientY表示的是事件觸發(fā)點(diǎn)在瀏覽器可見(jiàn)區(qū)域中相對(duì)于左上角的位置。

layerX，layerY
layerX及l(fā)ayerY表示的是事件觸發(fā)點(diǎn)相對(duì)于事件發(fā)生所在dom節(jié)點(diǎn)左上角的位置。

offsetX,offsetY
與layerX、layerY相似，同樣表示的是事件觸發(fā)點(diǎn)相對(duì)于事件發(fā)生所在dom節(jié)點(diǎn)左上角的位置。

pageX,pageY
pageX和pageY表示的是事件觸發(fā)點(diǎn)基于整個(gè)文檔左上角的相對(duì)位置，它是把你滾動(dòng)的距離計(jì)算在內(nèi)的。

screenX，screenY
screenX和screenY表示的事件觸發(fā)點(diǎn)基于整個(gè)屏幕，相對(duì)于屏幕左上角的相對(duì)位置。

x，y
x、y與pageX、pageY相似，表示的同樣是事件觸發(fā)點(diǎn)相對(duì)于文檔左上角的位置。

來(lái)，我們用幾張圖來(lái)形象的標(biāo)示這些坐標(biāo)所代表的位置信息：

然而并不是所有瀏覽器都能提供所有坐標(biāo)信息，例如x、y的概念在FireFox中是沒(méi)有的。下圖中說(shuō)明了各種瀏覽器對(duì)于不同坐標(biāo)信息的兼容情況，我們?cè)谶x用坐標(biāo)的時(shí)候不僅僅要選用正確的坐標(biāo)，還要考慮在不同瀏覽器下的兼容。

好了，對(duì)事件坐標(biāo)的概念解釋到這，相信大家都已經(jīng)理解了，下面我們來(lái)講講js中的元素坐標(biāo)。

元素坐標(biāo)

style
document.getElementById("id").style.width=value
document.getElementById("id").style.height=value
document.getElementById("id").style.top=value
document.getElementById("id").style.left=value

在js中，我們可以通過(guò)style去設(shè)置元素的位置以及寬高信息。值得注意的是，在IE瀏覽器中，我們?cè)O(shè)置值得時(shí)候，value可以為數(shù)字，如
document.getElementById("id").style.left=100
但是在其他瀏覽器中，value的值必須為字符串，如
document.getElementById("id").style.left=“100px”
offset
value=document.getElementById("id").offsetLeft
value=document.getElementById("id").offsetTop
value=document.getElementById("id").offsetWidth
value=document.getElementById("id").offsetHeight

既然可以在js中設(shè)值，我們同樣也可以在js中取值。我們可以通過(guò)offset獲取到元素相對(duì)于文檔的位置信息。元素信息還有很多，小編在這就不一一介紹了，同學(xué)們有興趣自己去了解一下。

事件坐標(biāo)與元素坐標(biāo)聯(lián)用
在了解了事件坐標(biāo)與元素坐標(biāo)之后，我們就可以做一些精準(zhǔn)的頁(yè)面間的交互了。用過(guò)canvas的同學(xué)們都知道，canvas是h5強(qiáng)大的新元素之一，是有希望取代flash的存在，不少網(wǎng)頁(yè)都采用canvas去做好玩的游戲。但是canvas有一點(diǎn)不是很好，canvas內(nèi)部所繪制的圖形是沒(méi)有元素概念的，也就是說(shuō)我們無(wú)法通過(guò)監(jiān)聽(tīng)canvas內(nèi)部元素來(lái)做到交互。但是，我們可以通過(guò)精確的坐標(biāo)轉(zhuǎn)換來(lái)達(dá)到我們想要的效果?，F(xiàn)在我們來(lái)做一個(gè)點(diǎn)擊canvas中矩形然后頁(yè)面中彈出hello的效果：

哈哈，這就是最簡(jiǎn)單的一個(gè)頁(yè)面交互了不是嘛？配合canvas可以得到許多炫酷的效果噢~canvas的出現(xiàn)讓前端在動(dòng)畫(huà)方面有了十分明顯的改善，這也是我十分鐘愛(ài)canvas的原因之一~順便給大家推薦兩個(gè)canvas庫(kù)，fabric.js以及konva.js。你，值得擁有~好了，本期位置坐標(biāo)概念介紹到這里，同學(xué)們下課！下期再見(jiàn)~