HTML中的坐标系及其在MouseEvent和元素Box中的应用

HTML中的坐标系及其在MouseEvent和元素中的应用

HTML有四个坐标系统： Screen， Page，Client和offset， 用于描述DOM元素的Box尺寸和MouseEvent中的位置。

• screen: 屏幕坐标系，(screenX，screenX), 屏幕的左上角是（0，0）， 它与窗口无关， 无论浏览器的窗口如何移动和缩放，screen坐标系的原点始终在显示屏的左上角，W和H也不变。

Screen坐标的最大范围是screen.width, screen.height,

** 与浏览器的zoom level无关。

** 与浏览器窗口的大小和位置无关

** 只与屏幕的resolution和缺省的devicePixelRatio有关，i.e.

ScreenResolution.width === 缺省的devicePixelRatio * screen.width

• client: 浏览器window客户区（viewport）的坐标系，(clientX, clientY),  local（DOM conten0074）的坐标系，

其最大范围是 window.innerWidth,  window.innerHeight。

**与浏览器的zoom level成正比，在窗口最大化的情况下，

ZoomLevel = screen.availWidth / window.innerWidth

** window.outerHeight是整个window的高度，比innerHeight多出的是 browser自己占用的区域（包括： title区和address bar区）

• offset: 偏移坐标系(offsetX， offsetY), 相对于target node的padding Edge，他是变化最多的，因为他的基准，target node，随着鼠标的移动而不断变化。

备注： x, y: 分别是clientX和clientY坐标的别名，属于client坐标系

注意：这里面的坐标单位都是browser的坐标单位，不是显示器的物理分辨率，

例如：显示器的物理分辨率是， 1920 * 1200， 但是，browser的scrren坐标范围只有1280*800，二者之比值是缺省的devicePixelRatio， 1.5

window object 就是 document.defaultView

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

div元素Box的高度

elmnt.clientHeight： "viewable" 高度， 包括了padding, 不包括border, scrollbar or margin. 如果元素的content长度高于元素的实际height, 此viewable height只返回 可见部分的高度

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

scrollHeight?

//  document.defaultView.getComputedStyle(document.documentElement,  null).width

box-sizing缺省是content-box， 也可以另外设置为border-box