screenX / Y，clientX / Y和pageX / Y有什麼區別？

時間 2020-01-12

標籤 screenx clientx pagex 什麼區別简体版

原文原文鏈接

screenX / Y ， clientX / Y和pageX / Y什麼pageX ？ css

另外，對於iPad Safari，計算結果是否與臺式機類似？仍是由於視口而有所不一樣？ html

若是您能指出一個例子，那就太好了。瀏覽器

#1樓

pageX / Y給出相對於CSS像素中<html>元素的座標。
clientX / Y以CSS像素給出相對於viewport的座標。
screenX / Y以設備像素爲單位給出相對於screen的座標。

關於您的最後一個問題，在臺式機和移動瀏覽器上計算是否類似...爲了更好地理解-在移動瀏覽器上，咱們須要區分兩個新概念： 佈局視口和可視視口 。可視視口是頁面上當前顯示在屏幕上的部分。佈局視口是在桌面瀏覽器上呈現的整個頁面（包括在當前視口中不可見的全部元素）的同義詞。 dom

在移動瀏覽器中， pageX和pageY仍相對於頁面以CSS像素爲單位，所以您能夠得到相對於文檔頁面的鼠標座標。另外一方面， clientX和clientY定義相對於可視視口的鼠標座標。編輯器

關於可視化視口和佈局視口之間的區別，這裏還有另外一個stackoverflow線程：可視化視口和佈局視口之間的區別？ ide

另外一個很好的資源： http : //www.quirksmode.org/mobile/viewports2.html 工具

#2樓

這是一張圖片，解釋pageY和clientY之間的區別。佈局

分別與pageX和clientX相同。 ui

pageX/Y座標相對於整個渲染頁面（包括經過滾動隱藏的部分）的左上角， this

而clientX/Y座標則相對於頁面可見部分的左上角，能夠經過瀏覽器窗口「看到」。

觀看演示

您可能永遠不須要screenX/Y

#3樓

幫助個人是，直接在此頁面中添加了一個事件，而後本身點擊了！在開發人員工具/ Firebug等中打開控制檯，而後粘貼如下內容：

document.addEventListener('click', function(e) { console.log( 'page: ' + e.pageX + ',' + e.pageY, 'client: ' + e.clientX + ',' + e.clientY, 'screen: ' + e.screenX + ',' + e.screenY) }, false);

Click anywhere

使用此代碼段，您能夠在滾動，移動瀏覽器窗口等時跟蹤點擊位置。

注意，當您一直滾動到頂部時，pageX / Y和clientX / Y是相同的！

#4樓

二者之間的差別將在很大程度上取決於您當前所指的瀏覽器。每一個屬性都以不一樣的方式或根本沒有實現這些屬性。 Quirksmode擁有大量有關W3C標準（如DOM和JavaScript事件）的瀏覽器差別的文檔。

#5樓

在JavaScript中：

pageX ， pageY ， screenX ， screenY ， clientX和clientY返回一個數字，該數字指示一個點相對於參考點的物理「 CSS像素」的數量。事件點是用戶單擊的位置，參考點是左上角的點。這些屬性返回到該參考點的水平和垂直距離。

pageX和pageY ：
相對於瀏覽器中完整呈現的內容區域的左上角。該參考點在URL欄下方，而且在左上方是「後退」按鈕。這一點可能在瀏覽器窗口中的任何位置，而且若是頁面中嵌入了嵌入式可滾動頁面而且用戶移動了滾動條，則實際上能夠更改位置。

screenX和screenY ：
相對於物理屏幕/監視器的左上角，僅當您增長或減小監視器數量或監視器分辨率時，此參考點纔會移動。

clientX和clientY ：
相對於瀏覽器窗口內容區域（視口）的左上邊緣。即便用戶從瀏覽器內部移動滾動條，此點也不會移動。

要查看哪些瀏覽器支持哪些屬性，請執行如下操做：

http://www.quirksmode.org/dom/w3c_cssom.html#t03

w3schools擁有一個在線Java解釋器和編輯器，所以您能夠看到各自的功能

http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy

<!DOCTYPE html> <html> <head> <script> function show_coords(event) { var x=event.clientX; var y=event.clientY; alert("X coords: " + x + ", Y coords: " + y); } </script> </head> <body> <p onmousedown="show_coords(event)">Click this paragraph, and an alert box will alert the x and y coordinates of the mouse pointer.</p> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。