文章整理自 CSSOM View Module,如有不清楚之处,请查阅

window

inner<Width|Height>

网页可视的的高度,包括滚动条

The innerWidth attribute must return the viewport width including the size of a rendered scroll bar (if any), or zero if there is no viewport.

scroll<X|Y> page<X | Y>Offset

整个网页滚动到的坐标

client: 和浏览器有关的坐标

screen<X|Y>

客户端(浏览器窗口)相对屏幕左上角的坐标,

outer<Width|Height>

客户端(浏览器)的大小
width|height of the client window

Element

scroll<Top|Left|Width|Height>

• Top 当前显示与元素内容最高点相差的距离
• Left 同理
• Height|width 底下内容所有的长度

Screen Shot 2017-03-20 at 5.51.37 PM.png

client<Top|Left|Width|Height>

content的高度

• Top|left 相当于borderWidth
• Width|Height 一直是content+padding的大小

Screen Shot 2017-03-20 at 9.43.59 AM.png

offset<Height | Width>

元素的content+padding的高度

Event对象

partial interface MouseEvent {
  readonly attribute double screenX;
  readonly attribute double screenY;
  readonly attribute double pageX;
  readonly attribute double pageY;
  readonly attribute double clientX;
  readonly attribute double clientY;
  readonly attribute double x;
  readonly attribute double y;
  readonly attribute double offsetX;
  readonly attribute double offsetY;
};

screen<X|Y>

相对于屏幕的坐标

page<X|Y>

DRAFT#pageX
以网页的起始左上角为原点
以父元素为起点
If the event’s dispatch flag is set, return the horizontal coordinate of the position where the event occurred relative to the origin of the initial containing block and terminate these steps.
Let offset be the value of the scrollX attribute of the event’s associated Window object, if there is one, or zero otherwise.
Return the sum of offset and the value of the event’s clientX attribute.

client<X|Y>

以浏览器可显示区域左上角为原点

x|y

同client

The x attribute must return the value of clientX.

The y attribute must return the value of clientY.

offset<X|Y>

以点击元素为坐标原点

If the event’s dispatch flag is set, return the y-coordinate of the position where the event occurred relative to the origin of the padding edge of the target node, ignoring the transforms that apply to the element and its ancestors, and terminate these steps.
Return the value of the event’s pageY attribute.