螢幕座標客戶區域（可視視窗）座標頁面座標的區分

螢幕座標、可視視窗座標、頁面座標有時不能迅速的對應起來，為了更好的區分三者，特意畫了一張圖如下：

顧名思義，即整個電腦螢幕上任意一點的位置座標，對應的屬性分別為screenx，screeny,範圍如上圖最外層紅色邊框範圍，座標為藍色虛線對應的座標。可以使用類似下面的**取得滑鼠事件的螢幕座標:

var div = document.getelementbyid("mydiv");
eventutil.addhandler(div, "click", function(event));

上述**中的eventutil是乙個事件工具函式，在文末會給出

可以將瀏覽器分為兩大塊，即瀏覽器上部的使用者操作欄（寶藍色框所對應的區域）和下部的可視視窗區域（上圖中棕色框所對應的區域），該座標系（顏色為粉色）的原點位於可視視窗的右上角，對應的屬性為clientx,clienty

可以使用類似下列**取得滑鼠事件的客戶端座標資訊:

var div = document.getelementbyid("mydiv");
eventutil.addhandler(div, "click", function(event));

過客戶區座標能夠知道滑鼠是在視口中什麼位置發生的，而頁面座標通過事件物件的 pagex 和 pagey 屬性，能告訴你事件是在頁面中的什麼位置發生的。換句話說，這兩個屬性表示滑鼠游標在頁面中的位置，因此座標是從頁面本身而非視口的左邊和頂邊計算的（頁面為藍色邊框對應的區域，座標係為棕色座標系）。

以下**可以取得滑鼠事件在頁面中的座標:

var div = document.getelementbyid("mydiv");
eventutil.addhandler(div, "click", function(event));

var eventutil =  else if (element.attachevent) else 
},//它返回對 event 物件的引用
getevent: function(event),
//它返回事件的目標
gettarget: function(event),
//用於取消事件的預設行為
preventdefault: function(event) else 
},removehandler: function(element, type, handler) else if (element.detachevent) else  
},// 由於 ie 不支援事件捕獲，因此這個方法在跨瀏覽器的情況下，也只能用來阻止事件冒泡。
stoppropagation: function(event) else 
},};

螢幕座標 客戶區域（可視視窗）座標 頁面座標的區分

螢幕座標 客戶區域（可視視窗）座標 頁面座標的區分

螢幕座標 客戶區域（可視視窗）座標 頁面座標的區分

螢幕座標系和視窗客戶區座標

相關推薦

螢幕座標客戶區域（可視視窗）座標頁面座標的區分

螢幕座標客戶區域（可視視窗）座標頁面座標的區分

螢幕座標客戶區域（可視視窗）座標頁面座標的區分