网页元素坐标表示及坐标计算方法

一、页面元素坐标种类

    根据DOM的鼠标事件（参见https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent），浏览器响应鼠标事件时，会上报四类坐标：

1、(pageX，pageY)：相对于整个网页的坐标，因此坐标点可能比实际屏幕尺寸大。该坐标属于绝对坐标，不随着页面滚动而变化，当网页渲染完毕后，每个元素的page坐标就已固定。

2、(clientX, clientY)：相对于当前视图区域的坐标，如果元素属于iframe，则是相对于iframe窗口坐标。

3、(offsetX，offsetY)：鼠标位置相对于捕获事件的目标节点的坐标，如果点击位置没有元素，则为相对于body元素的坐标。

4、(screenX，screenY)：相对于显示屏幕的坐标。

5、(layerX, layerY)：非标准的特性，可能存在兼容性问题。表示鼠标点相对于该布局层顶端和左端的坐标，一般情况下与pageX、pageY相同，属于该层的绝对坐标。

但上述坐标中，哪些坐标是Web内核计算输出的，哪些坐标是传给Web内核的呢？其实，浏览器内核的输入坐标只有两个：屏幕坐标（screenX、screenY）和视图坐标（鼠标点相较于浏览器视图窗口的坐标）。其余4类坐标均是计算而来。

二、Chromium/Chrome浏览器鼠标事件捕获

Chromium浏览器在触发鼠标（如点击）事件时，主程序首先获得