イベント処理におけるscreenX/Y、clientX/Y、pageX/Yの違いは何ですか?

違いを理解する: screenX/Y、clientX/Y、pageX/Y

Web 開発でイベント処理を行う場合、これは、screenX/Y、clientX/Y、pageX/Y プロパティ間の微妙な違いを理解するために非常に重要です。この区別は、ブラウザ ウィンドウとレンダリングされたページ全体の両方内の要素の位置を正確に決定するために重要です。

pageX/Y 座標

pageX および pageY 座標は、次のことを提供します。スクロールにより非表示になる可能性のあるコンテンツを含む、レンダリングされたページ全体の左上隅を基準とした絶対値。言い換えると、これらの値は、ブラウザ ウィンドウでの可視性に関係なく、ページ自体内の要素の位置を表します。

clientX/Y 座標

対照的にclientX および clientY の座標は、ページの表示部分 (ブラウザ ウィンドウを通して見える部分) の左上隅に関連します。これらの値はスクロールを考慮し、ビューポート内の要素の位置を提供します。ブラウザ ウィンドウ内のコンテンツのみが考慮されます。

screenX/Y 座標

最後に、screenX および screenY 座標は物理画面を指します。これらは、ブラウザ ウィンドウ、メニュー、その他の表示要素を含む、画面全体上の要素の絶対位置を提供します。これらの値は、スクロールやビューポートの寸法の影響を受けません。

例

これらの違いを説明するために、レンダリングされたページ全体の左側から 100 ピクセルの要素を考えてみましょう。上から50px。ただし、この要素は現在スクロールされて表示されなくなり、表示されるビューポートには要素の右側 200 ピクセルのコンテンツのみが表示されます。

• screenX/Y: (100 , 50)
• ページX/Y: (100 200, 50) = (300, 50)
• clientX/Y: (100 200 - 200, 50) = (100, 50)

この例は次のことを示しています要素が内にある場合、clientX および clientY の値が pageX および pageY の値と同じままであることただし、要素がスクロールされてビューから消えると、それに応じて調整されます。

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