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

wmui 發布于2019-08-23 10:32 / 1659人閱讀

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

offsetXY

以選中元素的盒子模型的左上角為原點，與滾動條無關

是該事件發生的盒子模型里的坐標。

clientXY

以瀏覽器可視區域的左上角為原點，與滾動條無關

是整個瀏覽器可用部分里的坐標。

pageXY

以瀏覽器可視區域的左上角為原點，與滾動條有關

是整個網頁里的坐標，按照整個頁面長度計算（包括滾動條長度）。
無滾動條時和clientXY一樣。

screenXY

以用戶屏幕左上角為原點

screenX 是鼠標位置相對于用戶屏幕（左側）水平偏移量，而 screenY 則是鼠標相對于屏幕（頂部）垂直方向的偏移量。

參考圖

GPU云服務器云服務器 js中和的區別 screenXY pageXY offsetXY

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

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

clientXY，offsetXY，pageXY的區別

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

terasum 2019-08-21 10:37 評論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
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

pumpkin9 2019-08-23 17:12 評論0 收藏0