一、頁(yè)面元素坐標(biāo)種類

????根據(jù)DOM的鼠標(biāo)事件(參見(jiàn)https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)，瀏覽器響應(yīng)鼠標(biāo)事件時(shí)，會(huì)上報(bào)四類坐標(biāo)：

1、(pageX，pageY)：相對(duì)于整個(gè)網(wǎng)頁(yè)的坐標(biāo)，因此坐標(biāo)點(diǎn)可能比實(shí)際屏幕尺寸大。該坐標(biāo)屬于絕對(duì)坐標(biāo)，不隨著頁(yè)面滾動(dòng)而變化，當(dāng)網(wǎng)頁(yè)渲染完畢后，每個(gè)元素的page坐標(biāo)就已固定。

2、(clientX, clientY)：相對(duì)于當(dāng)前視圖區(qū)域的坐標(biāo)，如果元素屬于iframe，則是相對(duì)于iframe窗口坐標(biāo)。

3、(offsetX，offsetY)：鼠標(biāo)位置相對(duì)于捕獲事件的目標(biāo)節(jié)點(diǎn)的坐標(biāo)，如果點(diǎn)擊位置沒(méi)有元素，則為相對(duì)于body元素的坐標(biāo)。

4、(screenX，screenY)：相對(duì)于顯示屏幕的坐標(biāo)。

5、(layerX, layerY)：非標(biāo)準(zhǔn)的特性，可能存在兼容性問(wèn)題。表示鼠標(biāo)點(diǎn)相對(duì)于該布局層頂端和左端的坐標(biāo)，一般情況下與pageX、pageY相同，屬于該層的絕對(duì)坐標(biāo)。

但上述坐標(biāo)中，哪些坐標(biāo)是Web內(nèi)核計(jì)算輸出的，哪些坐標(biāo)是傳給Web內(nèi)核的呢？其實(shí)，瀏覽器內(nèi)核的輸入坐標(biāo)只有兩個(gè)：屏幕坐標(biāo)(screenX、screenY)和視圖坐標(biāo)(鼠標(biāo)點(diǎn)相較于瀏覽器視圖窗口的坐標(biāo))。其余4類坐標(biāo)均是計(jì)算而來(lái)。

二、Chromium/Chrome瀏覽器鼠標(biāo)事件捕獲

Chromium瀏覽器在觸發(fā)鼠標(biāo)(如點(diǎn)擊)事件時(shí)，主程序首先獲得鼠標(biāo)相對(duì)于視圖區(qū)域(即去除瀏覽器應(yīng)用頂部條、地址欄、工具欄、底部欄)的坐標(biāo)(視圖坐標(biāo))，并在傳給WebKit內(nèi)核(或Render進(jìn)程)前計(jì)算出該坐標(biāo)對(duì)應(yīng)的屏幕坐標(biāo)(即screenX和screenY)，將此兩類坐標(biāo)封裝成WebMouseEvent對(duì)象。流程參見(jiàn)RenderWidgetHostViewAura::OnMouseEvent(ui::MouseEvent* event)。上述page、client、offset、layer坐標(biāo)均是在Chromium內(nèi)核中通過(guò)輸入的視圖區(qū)域坐標(biāo)計(jì)算生成。

因此，對(duì)于點(diǎn)擊某元素而言，瀏覽器視圖窗口坐標(biāo)是最重要的。

三、元素視圖窗口坐標(biāo)計(jì)算方法

元素相對(duì)于當(dāng)前DOM視圖窗口的坐標(biāo)可通過(guò)getBoundingClientRect()計(jì)算而得。但當(dāng)要計(jì)算該元素相對(duì)于瀏覽器視圖區(qū)域的坐標(biāo)，尤其針對(duì)該元素嵌入在某iframe中的情況，則需要利用getBoundingClientRect()迭代計(jì)算而成。代碼如下：

var targetObj=document.getElementById('test'); //假設(shè)網(wǎng)頁(yè)中存在一個(gè)id為test的元素

function calcViewportLocation(obj, winObj) {

var currentWindow = winObj;

var rect = obj.getBoundingClientRect(); //獲取該元素在當(dāng)前窗口視圖區(qū)域的位置

var top = rect.top;

var left = rect.left;

var width = rect.width;

var height = rect.height;

//若該元素在某iframe中，則計(jì)算該frame相較于父窗口的位置，并向上迭代直到主frame。元素的位置坐標(biāo)需要累加iframe的偏移。

while (currentWindow.frameElement != null) {

var obj1 = currentWindow.frameElement;

currentWindow = currentWindow.parent;

rect = obj1.getBoundingClientRect();

if (rect.top > 0) { top += rect.top; }

if (rect.left > 0) { left += rect.left; }

}

var final_x = Math.round(left);

var final_y = Math.round(top);

return {y:final_y, x:final_x, w:width, h:height};

}

//將該元素對(duì)象及所在window作為參數(shù)傳入。

var result = calcViewportLocation(targetObj, window);

將上述腳本注入到目標(biāo)元素所在DOM上下文中即可。(注意，若所在元素在iframe中，則Chrome類瀏覽器需要設(shè)定--disable-web-security --allow-file-access-from-files啟動(dòng)參數(shù)，否則會(huì)因跨域問(wèn)題無(wú)法計(jì)算iframe尺寸。)

諸如下圖例子(假設(shè)要計(jì)算子frame中iframeButton2元素的瀏覽器視圖坐標(biāo))：

藍(lán)色橫線表示iframeButton2元素坐上角相對(duì)于其所在iframe視圖窗口的坐標(biāo)，數(shù)值為X(92，51)，只需要targetObj.getBoundingClientRect()即可計(jì)算得到。而相對(duì)于瀏覽器視圖窗口的坐標(biāo)則為(380，59)，是X加上元素所在iframe的視圖窗口位置所得。

轉(zhuǎn)：https://blog.csdn.net/weixin_42080566/article/details/80105259

總結(jié)

以上是生活随笔為你收集整理的网页元素坐标表示及坐标计算方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。