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

Michael_Ding 發布于2019-08-26 11:39 / 1018人閱讀

摘要：入門系列之位置及相對位置事件坐標寫過代碼的一般都知道，在頁面操作中，坐標概念是一個很重要的概念，幾乎所有的頁面交互都牽扯到坐標的概念。，及表示的是事件觸發點相對于事件發生所在節點左上角的位置。我們可以通過獲取到元素相對于文檔的位置信息。

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。你，值得擁有~好了，本期位置坐標概念介紹到這里，同學們下課！下期再見~

GPU云服務器云服務器 js取元素相對位置相對位置不改變位置坐標 java相對位置設置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107317.html

js筆記系列之--Navigator對象理解及判斷

摘要：入門系列之位置及相對位置事件坐標對象在寫前端頁面的時候，我們會碰到不同瀏覽器下不同邏輯的情況。指明系統是否處于脫機模式的布爾值。運行瀏覽器的操作系統平臺。由客戶機發送服務器的頭部的值。 js入門系列之位置及相對位置事件坐標 Navigator對象在寫前端頁面的時候，我們會碰到不同瀏覽器下不同邏輯的情況。這個時候我們就有必要通過js代碼來確認當前瀏覽器的種類以及版本，這個時候我們...

高勝山 2019-08-22 15:20 評論0 收藏0
從0開始擼一個支持單軸輪播的雷達圖之加強篇(解決Echarts單軸輪播問題)

摘要：如果你嫌上面太瑣碎，可以直接取看我的試驗源碼，文件是歡迎本文后續從開始擼一個支持單軸輪播的雷達圖之末篇本文首發于在線示例如果你還不了解canvas，還不知道要講啥，建議從首篇看起：從0開始寫一個支持單軸輪播的雷達圖在首篇我們已經講了怎么實現輪播，在這里我們將要用這一篇文章來說一下雷達圖的單軸hover效果的實現，也是我寫這篇文章的原因，因為echarts只支持單個series的hov...

xcold 2019-08-20 19:02 評論0 收藏0
JS基礎（綁定及解綁事件，元素屬性及方法，元素位置及寬高的值）

摘要：綁定及解綁事件事件綁定的三種方式事件類型，命名函數，布爾值不支持代表的是當前綁定事件的對象事件類型，函數名字，移除事件注意中的第三個參數設置為就在捕獲過程中執行，反之就在冒泡過程中執行處理函數。 JS 綁定及解綁事件事件綁定的三種方式 .addEventListener(事件類型，命名函數，布爾值)　　　//IE8不支持　　　　　　(this代表的是當前綁定事件的對象) ...

Enlightenment 2019-08-26 13:30 評論0 收藏0