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

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

摘要：簡(jiǎn)單說(shuō)起來(lái)，就是是該事件發(fā)生的盒子模型里的坐標(biāo)，與滾動(dòng)條無(wú)關(guān)。頁(yè)面里寫(xiě)了個(gè)，背景顏色藍(lán)色，長(zhǎng)寬都是，在網(wǎng)頁(yè)的右上角，的位置。結(jié)果注意兩次的和有點(diǎn)誤差，這個(gè)誤差在以?xún)?nèi)都是沒(méi)問(wèn)題的。而是很夸張的數(shù)字，因?yàn)檫@是按照整個(gè)頁(yè)面長(zhǎng)度來(lái)計(jì)算的。

簡(jiǎn)單說(shuō)起來(lái)，就是：
offsetXY:是該事件發(fā)生的盒子模型里的坐標(biāo)，與滾動(dòng)條無(wú)關(guān)。
clientXY：是整個(gè)瀏覽器可用部分里的坐標(biāo)，與滾動(dòng)條無(wú)關(guān)。
pageXY：是整個(gè)網(wǎng)頁(yè)里的坐標(biāo)，與滾動(dòng)條有關(guān)。

下面來(lái)個(gè)簡(jiǎn)單的例子說(shuō)明一下。
頁(yè)面里寫(xiě)了個(gè)div，背景顏色藍(lán)色，長(zhǎng)寬都是10px，fix在網(wǎng)頁(yè)的右上角top20:px，right:10px的位置。網(wǎng)頁(yè)里寫(xiě)了很多的br，使得垂直的滾動(dòng)條可以滾動(dòng)。

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

大概效果是這樣的：

然后給這個(gè)小div綁個(gè)點(diǎn)擊事件：

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

做實(shí)驗(yàn)。首先滾動(dòng)條在位置1，點(diǎn)擊一下div，然后往下拖動(dòng)滾動(dòng)條到位置2，點(diǎn)擊一下div。打開(kāi)console。
結(jié)果：

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

注意兩次的offsetY和clientY有點(diǎn)誤差，這個(gè)誤差在10px以?xún)?nèi)都是沒(méi)問(wèn)題的。

毫無(wú)疑問(wèn)，offsetY是以這個(gè)div的盒子模型的左上角為原點(diǎn)的，兩次點(diǎn)擊都小于10.
clientY是以瀏覽器可視區(qū)域的左上角為原點(diǎn)的，所以它是大于20，因?yàn)槲覀兊膁iv是top 20px的。
而pageY是很夸張的數(shù)字，因?yàn)檫@是按照整個(gè)頁(yè)面長(zhǎng)度來(lái)計(jì)算的。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85883.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

ralap 2019-08-01 17:38 評(píng)論0 收藏0