clientXY，offsetXY，pageXY的區別

terasum 發布于2019-08-21 10:37 / 2674人閱讀

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

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

下面來個簡單的例子說明一下。
頁面里寫了個div，背景顏色藍色，長寬都是10px，fix在網頁的右上角top20:px，right:10px的位置。網頁里寫了很多的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。
結果：

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

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

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

GPU云服務器云服務器 pageXY offsetXY clientXY 主機的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85883.html

JS -- offsetXY、clientXY、pageXY、screenXY的區別

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

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

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

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

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

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

摘要：學堂碼匠面試里最常出現的問題句式大概就是說說和的區別談談和的不同了吧一波波的辨析題正在襲來，快快開啟防御，殺出重圍，來一場絕地反擊僵尸，啊，不對，辨析三連發掃描了眾多的面試題，發現額各個技術之間的辨析真的是如僵尸一般，一波一波的相信不少人 HTML5學堂-碼匠：面試里最常出現的問題句式大概就是說說XXX和XXX的區別談談XXX和XXX的不同了吧~！一波波的辨析題正在襲來，快快開啟防御，...

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

摘要：學堂碼匠面試里最常出現的問題句式大概就是說說和的區別談談和的不同了吧一波波的辨析題正在襲來，快快開啟防御，殺出重圍，來一場絕地反擊僵尸，啊，不對，辨析三連發掃描了眾多的面試題，發現額各個技術之間的辨析真的是如僵尸一般，一波一波的相信不少人 HTML5學堂-碼匠：面試里最常出現的問題句式大概就是說說XXX和XXX的區別談談XXX和XXX的不同了吧~！一波波的辨析題正在襲來，快快開啟防御，...

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