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

标签：outer   address   鼠标   坐标系   add   local   height   set   bsp   

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中的应用

标签：outer   address   鼠标   坐标系   add   local   height   set   bsp   

原文地址：http://www.cnblogs.com/GameEngine/p/7659181.html