js筆記系列之--位置及相對位置事件座標

js入門系列之

位置及相對位置事件座標

---

寫過代碼的通常都知道，在頁面操做中，座標概念是一個很重要的概念，幾乎全部的頁面交互都牽扯到座標的概念。尤爲是在遊戲中， 座標概念更是製做遊戲的最基本概念之中，不瞭解或者不清楚座標概念，那麼辛辛苦苦作的遊戲可能淪爲一個動畫。對於在寫js的時候，清晰地瞭解並能區分座標概念是一件很重要的事，尤爲是在js事件中的多種座標。下面咱們舉個例子來了解一下:

如圖所示，咱們監聽點擊testDiv與點擊文檔的事件，咱們能夠在控制檯觀察輸出的event信息。

在chrome瀏覽器下，所打印出的event信息中至少有6中關於座標的信息，下面咱們就仔細來談談各個座標信息的含義以及應用場合，作一個完整的位置信息文檔~

• clientX，clienY
  clientX以及clientY表示的是事件觸發點在瀏覽器可見區域中相對於左上角的位置。
• layerX，layerY
  layerX及layerY表示的是事件觸發點相對於事件發生所在dom節點左上角的位置。
• offsetX,offsetY
  與layerX、layerY類似，一樣表示的是事件觸發點相對於事件發生所在dom節點左上角的位置。
• pageX,pageY
  pageX和pageY表示的是事件觸發點基於整個文檔左上角的相對位置，它是把你滾動的距離計算在內的。
• screenX，screenY
  screenX和screenY表示的事件觸發點基於整個屏幕，相對於屏幕左上角的相對位置。
• x，y
  x、y與pageX、pageY類似，表示的一樣是事件觸發點相對於文檔左上角的位置。

來，咱們用幾張圖來形象的標示這些座標所表明的位置信息：

然而並非全部瀏覽器都能提供全部座標信息，例如x、y的概念在FireFox中是沒有的。下圖中說明了各類瀏覽器對於不一樣座標信息的兼容狀況，咱們在選用座標的時候不單單要選用正確的座標，還要考慮在不一樣瀏覽器下的兼容。

好了，對事件座標的概念解釋到這，相信你們都已經理解了，下面咱們來說講js中的元素座標。

元素座標

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中，咱們能夠經過style去設置元素的位置以及寬高信息。值得注意的是，在IE瀏覽器中，咱們設置值得時候，value能夠爲數字，如
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中設值，咱們一樣也能夠在js中取值。咱們能夠經過offset獲取到元素相對於文檔的位置信息。元素信息還有不少，小編在這就不一一介紹了，同窗們有興趣本身去了解一下。

事件座標與元素座標聯用
在瞭解了事件座標與元素座標以後，咱們就能夠作一些精準的頁面間的交互了。用過canvas的同窗們都知道，canvas是h5強大的新元素之一，是有但願取代flash的存在，很多網頁都採用canvas去作好玩的遊戲。可是canvas有一點不是很好，canvas內部所繪製的圖形是沒有元素概念的，也就是說咱們沒法經過監聽canvas內部元素來作到交互。可是，咱們能夠經過精確的座標轉換來達到咱們想要的效果。如今咱們來作一個點擊canvas中矩形而後頁面中彈出hello的效果：

哈哈，這就是最簡單的一個頁面交互了不是嘛？配合canvas能夠獲得許多炫酷的效果噢~canvas的出現讓前端在動畫方面有了十分明顯的改善，這也是我十分鐘愛canvas的緣由之一~順便給你們推薦兩個canvas庫，fabric.js以及konva.js。你，值得擁有~好了，本期位置座標概念介紹到這裏，同窗們下課！下期再見~