clientXY，offsetXY，pageXY的區(qū)別

terasum 發(fā)布于2019-08-21 10:37 / 2686人閱讀

摘要：簡單說起來，就是是該事件發(fā)生的盒子模型里的坐標，與滾動條無關(guān)。頁面里寫了個，背景顏色藍色，長寬都是，在網(wǎng)頁的右上角，的位置。結(jié)果注意兩次的和有點誤差，這個誤差在以內(nèi)都是沒問題的。而是很夸張的數(shù)字，因為這是按照整個頁面長度來計算的。

簡單說起來，就是：
offsetXY:是該事件發(fā)生的盒子模型里的坐標，與滾動條無關(guān)。
clientXY：是整個瀏覽器可用部分里的坐標，與滾動條無關(guān)。
pageXY：是整個網(wǎng)頁里的坐標，與滾動條有關(guān)。

下面來個簡單的例子說明一下。
頁面里寫了個div，背景顏色藍色，長寬都是10px，fix在網(wǎng)頁的右上角top20:px，right:10px的位置。網(wǎng)頁里寫了很多的br，使得垂直的滾動條可以滾動。

.fixed{
    position:fixed;
    width:10px;
    height:10px;
    background:blue;
    top:20px;
    right:10px;
}

大概效果是這樣的：

然后給這個小div綁個點擊事件：

function fixedClick(e){
    console.log("offsetY: " + e.offsetY);
    console.log("clientY: " + e.clientY);
    console.log("pageY: " + e.pageY);
}

做實驗。首先滾動條在位置1，點擊一下div，然后往下拖動滾動條到位置2，點擊一下div。打開console。
結(jié)果：

offsetY: 1
clientY: 21
pageY: 1649
offsetY: 7
clientY: 27
pageY: 1974

注意兩次的offsetY和clientY有點誤差，這個誤差在10px以內(nèi)都是沒問題的。

毫無疑問，offsetY是以這個div的盒子模型的左上角為原點的，兩次點擊都小于10.
clientY是以瀏覽器可視區(qū)域的左上角為原點的，所以它是大于20，因為我們的div是top 20px的。
而pageY是很夸張的數(shù)字，因為這是按照整個頁面長度來計算的。

云服務(wù)器 GPU云服務(wù)器 pageXY offsetXY clientXY 主機的區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85883.html

相關(guān)文章

JS -- offsetXY、clientXY、pageXY、screenXY的區(qū)別

摘要：以選中元素的盒子模型的左上角為原點，與滾動條無關(guān)是該事件發(fā)生的盒子模型里的坐標。以用戶屏幕左上角為原點是鼠標位置相對于用戶屏幕左側(cè)水平偏移量，而則是鼠標相對于屏幕頂部垂直方向的偏移量。 offsetXY 以選中元素的盒子模型的左上角為原點，與滾動條無關(guān) 是該事件發(fā)生的盒子模型里的坐標。 clientXY 以瀏覽器可視區(qū)域的左上角為原點，與滾動條無關(guān) 是整個瀏覽器可用部分里的坐標。 pa...

wmui 2019-08-23 10:32 評論0 收藏0
clientXY，offsetXY，pageXY的區(qū)別

摘要：簡單說起來，就是是該事件發(fā)生的盒子模型里的坐標，與滾動條無關(guān)。頁面里寫了個，背景顏色藍色，長寬都是，在網(wǎng)頁的右上角，的位置。結(jié)果注意兩次的和有點誤差，這個誤差在以內(nèi)都是沒問題的。而是很夸張的數(shù)字，因為這是按照整個頁面長度來計算的。簡單說起來，就是： offsetXY:是該事件發(fā)生的盒子模型里的坐標，與滾動條無關(guān)。 clientXY：是整個瀏覽器可用部分里的坐標，與滾動條無關(guān)。 pag...

rainyang 2019-08-01 14:47 評論0 收藏0
D3 源代碼解析（二）

摘要：第一節(jié)點位于第二節(jié)點內(nèi)。例如，返回意味著在在內(nèi)部，并且在之前。這個函數(shù)返回一個函數(shù)，返回的函數(shù)綁定了當前對象并執(zhí)行。這是繼上一篇D3源碼解構(gòu)文章后的對D3的研究筆記，筆者的能力有限，如有哪里理解錯誤，歡迎指正。對集合的操作關(guān)于d3.attr 一個可以處理很多情況的函數(shù)，當只傳入一個參數(shù)時，如果是string，則返回該屬性值，如果是對象，則遍歷設(shè)置對象的鍵值對屬性值，如果參數(shù)大于等...

tainzhi 2019-08-22 10:34 評論0 收藏0
「大集錦」WEB前端開發(fā) 辨析類面試真題

摘要：學(xué)堂碼匠面試里最常出現(xiàn)的問題句式大概就是說說和的區(qū)別談?wù)労偷牟煌税梢徊úǖ谋嫖鲱}正在襲來，快快開啟防御，殺出重圍，來一場絕地反擊僵尸，啊，不對，辨析三連發(fā)掃描了眾多的面試題，發(fā)現(xiàn)額各個技術(shù)之間的辨析真的是如僵尸一般，一波一波的相信不少人 HTML5學(xué)堂-碼匠：面試里最常出現(xiàn)的問題句式大概就是說說XXX和XXX的區(qū)別談?wù)刋XX和XXX的不同了吧~！一波波的辨析題正在襲來，快快開啟防御，...

CoderStudy 2019-08-22 11:08 評論0 收藏0
「大集錦」WEB前端開發(fā) 辨析類面試真題

摘要：學(xué)堂碼匠面試里最常出現(xiàn)的問題句式大概就是說說和的區(qū)別談?wù)労偷牟煌税梢徊úǖ谋嫖鲱}正在襲來，快快開啟防御，殺出重圍，來一場絕地反擊僵尸，啊，不對，辨析三連發(fā)掃描了眾多的面試題，發(fā)現(xiàn)額各個技術(shù)之間的辨析真的是如僵尸一般，一波一波的相信不少人 HTML5學(xué)堂-碼匠：面試里最常出現(xiàn)的問題句式大概就是說說XXX和XXX的區(qū)別談?wù)刋XX和XXX的不同了吧~！一波波的辨析題正在襲來，快快開啟防御，...

ralap 2019-08-01 17:38 評論0 收藏0