一、页面元素坐标种类

根据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浏览器在触发鼠标(如点击)事件时，主程序首先获得鼠标相对于视图区域(即去除浏览器应用顶部条、地址栏、工具栏、底部栏)的坐标(视图坐标)，并在传给WebKit内核(或Render进程)前计算出该坐标对应的屏幕坐标(即screenX和screenY)，将此两类坐标封装成WebMouseEvent对象。流程参见RenderWidgetHostViewAura::OnMouseEvent(ui::MouseEvent* event)。上述page、client、offset、layer坐标均是在Chromium内核中通过输入的视图区域坐标计算生成。

因此，对于点击某元素而言，浏览器视图窗口坐标是最重要的。

三、元素视图窗口坐标计算方法

元素相对于当前DOM视图窗口的坐标可通过getBoundingClientRect()计算而得。但当要计算该元素相对于浏览器视图区域的坐标，尤其针对该元素嵌入在某iframe中的情况，则需要利用getBoundingClientRect()迭代计算而成。代码如下：

1. var targetObj=document.getElementById('test'); //假设网页中存在一个id为test的元素
2. function calcViewportLocation(obj, winObj) {
3. var currentWindow = winObj;
4. var rect = obj.getBoundingClientRect(); //获取该元素在当前窗口视图区域的位置
5. var top = rect.top;
6. var left = rect.left;
7. var width = rect.width;
8. var height = rect.height;
9. //若该元素在某iframe中，则计算该frame相较于父窗口的位置，并向上迭代直到主frame。元素的位置坐标需要累加iframe的偏移。
10. while (currentWindow.frameElement != null) {
11. var obj1 = currentWindow.frameElement;
12. currentWindow = currentWindow.parent;
13. rect = obj1.getBoundingClientRect();
14. if (rect.top > 0) { top += rect.top; }
15. if (rect.left > 0) { left += rect.left; }
16. }
17. var final_x = Math.round(left);
18. var final_y = Math.round(top);
19. return {y:final_y, x:final_x, w:width, h:height};
20. }
21. //将该元素对象及所在window作为参数传入。
22. var result = calcViewportLocation(targetObj, window);

将上述脚本注入到目标元素所在DOM上下文中即可。(注意，若所在元素在iframe中，则Chrome类浏览器需要设定--disable-web-security --allow-file-access-from-files启动参数，否则会因跨域问题无法计算iframe尺寸。)

诸如下图例子(假设要计算子frame中iframeButton2元素的浏览器视图坐标)：

蓝色横线表示iframeButton2元素坐上角相对于其所在iframe视图窗口的坐标，数值为X(92，51)，只需要targetObj.getBoundingClientRect()即可计算得到。而相对于浏览器视图窗口的坐标则为(380，59)，是X加上元素所在iframe的视图窗口位置所得。

转：https://blog.csdn.net/weixin_42080566/article/details/80105259