screenX/Y, clientX/Y dan pageX/Y: Apakah Perbezaannya?

Menyingkap Perbezaan: screenX/Y, clientX/Y, dan pageX/Y

Dalam pembangunan web, memahami selok-belok kedudukan dan koordinat adalah penting. Apabila ia datang kepada koordinat tetikus, istilah screenX/Y, clientX/Y dan pageX/Y sering muncul. Artikel ini bertujuan untuk membedah perbezaan antara koordinat yang membingungkan ini.

pageY lwn clientY lwn screenY

Pertimbangkan imej berikut:

[Imej of pageY vs. clientY vs. screenY]

Seperti yang anda lihat, pageY dan clientY adalah relatif ke penjuru kiri sebelah atas halaman. Walau bagaimanapun, pageY mempertimbangkan keseluruhan halaman yang dipaparkan, termasuk bahagian tersembunyi akibat penatalan, manakala klienY hanya berkaitan dengan port pandangan yang boleh dilihat. screenY, sebaliknya, adalah relatif kepada skrin fizikal.

pageX vs. clientX vs. screenX

Sama seperti rakan sejawatannya pada paksi Y, pageX ialah berbanding penjuru kiri sebelah atas keseluruhan halaman, clientX adalah khusus untuk viewport yang boleh dilihat dan screenX adalah relatif kepada fizikal skrin.

Contoh

Untuk menggambarkan perbezaan praktikal, pertimbangkan coretan berikut:

document.addEventListener('mouseover', (event) => {
  console.log(`clientX: ${event.clientX} clientY: ${event.clientY}`);
  console.log(`pageX: ${event.pageX} pageY: ${event.pageY}`);
});

iPad Safari dan Viewport

Dalam iPad Safari, prinsipnya secara amnya sama seperti pada desktop. Walau bagaimanapun, kehadiran port pandangan mungkin memperkenalkan variasi halus. Dalam konteks ini, port pandangan merujuk kepada kawasan kelihatan halaman web dalam tetingkap penyemak imbas. Untuk peranti seperti iPad, port pandangan mungkin diskalakan, menyebabkan koordinat dikira secara berbeza.

Kesimpulannya, memahami nuansa halus antara screenX/Y, clientX/Y dan pageX/Y adalah penting untuk pengendalian acara ketepatan . Dengan memahami perbezaan asas yang digariskan dalam artikel ini, pembangun boleh memanfaatkan koordinat ini dengan berkesan dalam aplikasi web mereka.

Atas ialah kandungan terperinci screenX/Y, clientX/Y dan pageX/Y: Apakah Perbezaannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!