Web開発におけるscreenX/Y、clientX/Y、pageX/Yの違いは何ですか?

ScreenX/Y、ClientX/Y、および PageX/Y を理解する

Web 開発の分野では、screenX/Y の違いを理解するY、clientX/Y、pageX/Y は、正確なナビゲーションと要素の位置決めに重要です。 page.

座標の定義

• pageX/Y: スクロールによって隠れた領域を含む、レンダリングされたページ全体に対する相対座標。
• clientX/Y: 座標ブラウザ ウィンドウ内のページの表示部分を基準とした相対座標。
• screenX/Y: 物理画面を基準とした座標。

例使用法

コンテンツがビューポートを超えて広がっている Web ページを考えてみましょう。ユーザーが下にスクロールしても、pageY および pageX の値は、ページ全体に対するマウス カーソルの位置を表します。ただし、clientX と clientY の値は、表示領域内の位置を反映するように更新されます。

iPad Safari に関する考慮事項

iPad Safari の場合、ビューポートは物理的なビューポートよりも小さくなります。画面。したがって、clientX/Y および pageX/Y 座標は screenX/Y 座標とは異なります。

デモとコード スニペット

これらの違いを説明するには、以下を参照してください。提供されているデモを実行するか、次の JavaScript スニペットを実行します:

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);
});

このスニペットは、座標の動的な更新を示します。マウスがページ上に移動してスクロールします。

以上がWeb開発におけるscreenX/Y、clientX/Y、pageX/Yの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。