Apakah Perbezaan Antara screenX/Y, clientX/Y dan pageX/Y dalam Pembangunan Web?

Memahami ScreenX/Y, ClientX/Y dan PageX/Y

Dalam bidang pembangunan web, memahami perbezaan antara screenX/ Y, clientX/Y dan pageX/Y adalah penting untuk navigasi yang tepat dan elemen kedudukan pada halaman.

Mentakrifkan Koordinat

• pageX /Y: Koordinat relatif kepada keseluruhan halaman yang diberikan, termasuk kawasan yang tersembunyi dengan menatal.
• clientX/Y: Koordinat relatif kepada bahagian halaman yang boleh dilihat dalam tetingkap penyemak imbas.
• screenX/Y: Selaras relatif kepada skrin fizikal.

Contoh Penggunaan

Pertimbangkan web halaman dengan kandungannya melangkaui port pandang. Apabila pengguna menatal ke bawah, nilai pageY dan pageX masih akan mewakili kedudukan kursor tetikus berbanding keseluruhan halaman. Walau bagaimanapun, nilai clientX dan clientY akan dikemas kini untuk mencerminkan kedudukan dalam kawasan yang boleh dilihat.

Pertimbangan Safari iPad

Untuk Safari iPad, port pandangan adalah lebih kecil daripada fizikal skrin. Oleh itu, koordinat clientX/Y dan pageX/Y akan berbeza daripada koordinat screenX/Y.

Demo dan Coretan Kod

Untuk menggambarkan perbezaan ini, anda boleh melawati tunjuk cara yang disediakan atau laksanakan coretan JavaScript berikut:

document.addEventListener('DOMContentLoaded', () => {
  const info = document.getElementById('info');
  const updateInfo = event => {
    const { clientX, clientY, pageX, pageY } = event;
    info.innerHTML = `clientX: ${clientX} clientY: ${clientY}<br />pageX: ${pageX} pageY: ${pageY}`;
  };
  document.addEventListener('mouseover', updateInfo);
  document.addEventListener('mousemove', updateInfo);
});

Coretan ini menunjukkan kemas kini dinamik koordinat semasa tetikus bergerak ke atas dan menatal halaman.

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