HTML中的坐標系及其在MouseEvent和元素Box中的應用

HTML有四個坐標系統： Screen， Page，Client和offset， 用於描述DOM元素的Box尺寸和

MouseEvent中的位置，

screen: 屏幕坐標系，(screenX，screenX), 屏幕的左上角是（0，0）， 它與窗口無關， 無論瀏覽器的窗口如何移動和縮放，screen坐標系的原點始終在顯示屏的左上角，W和H也不變。

page: 頁面坐標系，(pageX， pageY), 頁面的左上角是（0，0）

client: 客戶區坐標系，(clientX, clientY), local（DOM conten0074）的坐標系，

offset: 偏移坐標系(offsetX， offsetY), 相對於target node的padding Edge，他是變化最多的，因為他的基準，target node，隨著鼠標的移動而不斷變化。

備註： x, y: 分別是clientX和clientY坐標的別名，屬於client坐標系

註意：這裏面的坐標單位都是browser的坐標單位，不是顯示器的物理分辨率，

例如：顯示器的分辨率是， 1920 * 1200， 但是，browser的坐標只有1280*800

window object 就是 document.defaultView

其中window.outerHeight是整個window的高度，而window.innerHeight.只是browser的客戶區

（viewport）的的高度， 二者相差是 browser自己占用得 title區和address bar區

在全屏模式（徹底隱藏browser的title和address bar）下，window.outerHeight === window.innerHeight === screen.height

offsetHeight, clientHeight, scrollHeight?

div元素的高度

elmnt.clientHeight： "viewable" 高度， 包括了padding, 不包括border, scrollbar or margin.

elmnt.offsetHeight：

如果元素的content長度高於元素的實際height, 此viewable height只返回 可見部分的高度

offsetHeight： viewable height， 包括了padding, border和scrollbar.

HTML中的坐標系及其在MouseEvent和元素Box中的應用