Apa perbedaan antara screenX / Y, clientX / Y dan pageX / Y?

581

Apa perbedaan antara screenX/ Y, clientX/ Ydan pageX/ Y?

Juga untuk iPad Safari, apakah perhitungannya sama seperti pada desktop — ATAU ada beberapa perbedaan karena viewport?

Akan lebih bagus jika Anda bisa memberi saya contoh.

javascript ipad safari mouse-position hmthr
sumber
2
Demo lain yang menggunakan lima properti berbeda (layar, klien, halaman, layer, offset) untuk mendapatkan koordinat mouse.
akinuri

Jawaban:

504

Dalam JavaScript:

pageX, pageY, screenX, screenY, clientX, Dan clientYkembali nomor yang menunjukkan jumlah “piksel CSS” fisik titik adalah dari titik acuan. Titik kejadian adalah tempat pengguna mengklik, titik referensi adalah titik di kiri atas. Properti ini mengembalikan jarak horizontal dan vertikal dari titik referensi itu.

pageXdan pageY:
Relatif ke kiri atas area konten yang sepenuhnya diberikan di browser. Titik referensi ini berada di bawah bilah URL dan tombol kembali di kiri atas. Titik ini bisa berada di mana saja di jendela browser dan benar-benar dapat mengubah lokasi jika ada halaman yang dapat digulir tertanam di dalam halaman dan pengguna memindahkan scrollbar.

screenXdan screenY:
Relatif ke kiri atas layar fisik / monitor, titik referensi ini hanya bergerak jika Anda menambah atau mengurangi jumlah monitor atau resolusi monitor.

clientXdan clientY:
Relatif ke tepi kiri atas area konten ( viewport ) dari jendela browser. Titik ini tidak bergerak bahkan jika pengguna memindahkan bilah gulir dari dalam browser.

Untuk visual yang didukung browser properti mana:

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

w3schools memiliki interpreter dan editor Javascript online sehingga Anda dapat melihat apa yang dilakukan masing-masing

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>
Luaskan cuplikan

Eric Leschinski
sumber
4
dan dalam jquery, offsetX dan offsetY relatif terhadap wadah induk
Muhammad Umer
2
Tautan ke w3schools tampaknya hanya tersedia di bagian referensi sekarang: w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
valid
1
Saya pikir itu penjelasan yang menyesatkan atau setidaknya tidak efektif untuk pageX / pageY (dan akibatnya, pertanyaan) karena itu membuat referensi ke URL bar dan tombol kembali sedangkan itu lebih baik dijelaskan dalam hal isi halaman seperti pada misalnya penjelasan visual Jawabannya memberi tahu. Juga, contoh w3schools tidak membantu karena hanya menghasilkan satu pasangan x / y, dan tidak ada scroll di dalamnya yang akan menunjukkan perbedaannya.
Robert Monfera
4
Penjelasan PageX / PageY & ClientX / clientY dipertukarkan. Anda harus memperbaikinya. itu menyesatkan
Navpreet Kaur
1
Saya pikir @NavpreetKaur benar. Jawaban ini berlawanan dengan clientX vs pageX
zhouji
498

Inilah gambar yang menjelaskan perbedaan antara pageYdan clientY.

pageY vs clientY

Sama untuk pageXdan clientX, masing-masing.

pageX/Y koordinat relatif terhadap sudut kiri atas dari seluruh halaman yang diberikan (termasuk bagian yang disembunyikan dengan menggulir),

sedangkan clientX/Ykoordinat relatif terhadap sudut kiri atas bagian halaman yang terlihat, "terlihat" melalui jendela browser.

Lihat Demo

Anda mungkin tidak akan pernah membutuhkannya screenX/Y

Dan
sumber
21
Luar biasa, Terima kasih untuk Demo, menjelaskan lebih baik daripada teks.
Rahul Prasad
Saya suka penjelasan @ SimoEndre yang terbaik
Pierre
9
mau memvisualisasikan apa screenX/Yitu?
ayjay
1
Saya ingin mengikat acara klik pada area persegi panjang tertentu pada halaman jadi pageX/pageYharus digunakan bukan clientX/clientY?
techie_28
1
bagaimana dengan x dan y sederhana? Mereka tampak sama dengan clientX / Y ketika saya mencobanya tetapi saya tidak menemukan referensi yang pasti di atasnya
zhouji
117
  1. pageX / Y memberikan koordinat relatif terhadap <html>elemen dalam piksel CSS.
  2. clientX / Y memberikan koordinat relatif terhadap viewportpiksel CSS.
  3. screenX / Y memberikan koordinat relatif terhadap screenpiksel dalam perangkat.

Mengenai pertanyaan terakhir Anda jika perhitungannya serupa pada browser desktop dan seluler ... Untuk pemahaman yang lebih baik - pada browser seluler - kita perlu membedakan dua konsep baru: viewport tata letak dan viewport visual . Tampilan visual adalah bagian dari halaman yang saat ini ditampilkan di layar. Layout viewport adalah sinonim untuk halaman penuh yang diberikan pada browser desktop (dengan semua elemen yang tidak terlihat pada viewport saat ini).

Pada browser seluler, pageXdan pageYmasih relatif terhadap halaman dalam piksel CSS sehingga Anda dapat memperoleh koordinat mouse relatif terhadap halaman dokumen. Di sisi lain clientXdan clientYtentukan koordinat mouse dalam kaitannya dengan viewport visual .

Ada alur stackoverflow lain di sini mengenai perbedaan antara viewport visual dan viewport layout: Perbedaan antara viewport visual dan viewport tata letak?

Sumber lain yang bagus: http://www.quirksmode.org/mobile/viewports2.html

Endre Simo
sumber
27

Apa yang membantu saya adalah menambahkan acara langsung ke halaman ini dan mengklik sendiri! Buka konsol Anda di alat pengembang / Firebug dll dan rekatkan ini:

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
Luaskan cuplikan

Dengan cuplikan ini, Anda dapat melacak posisi klik saat Anda menggulir, memindahkan jendela browser, dll.

Perhatikan bahwa pageX / Y dan clientX / Y sama ketika Anda digulir sampai ke atas!

fierysunset
sumber
5

Perbedaan antara keduanya akan sangat tergantung pada browser apa yang saat ini Anda maksud. Masing-masing menerapkan properti ini secara berbeda, atau tidak sama sekali. Quirksmode memiliki dokumentasi yang bagus mengenai perbedaan browser sehubungan dengan standar W3C seperti DOM dan Acara JavaScript.

Dominic Barnes
sumber
4
Jawaban Anda baik, tetapi akan menjadi usang segera quirksmode.org/mobile/tableViewport_desktop.html
Dan