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

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

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

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

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

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

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

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

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

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

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

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

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

var targetObj=document.getElementById('test'); //假設(shè)網(wǎng)頁中存在一個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中，則計算該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};

}

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

var result = calcViewportLocation(targetObj, window);

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

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

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

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

總結(jié)

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

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