screenX / Y、clientX / Y、pageX / Yの違いは何ですか？
回答:
JavaScriptの場合：
pageX、pageY、screenX、screenY、clientX、及びclientY点は基準点から物理「CSSピクセル」の数を示す数値を返します。イベントポイントは、ユーザーがクリックした場所であり、参照ポイントは左上のポイントです。これらのプロパティは、その基準点からの水平距離と垂直距離を返します。
pageXand pageY：
ブラウザの完全にレンダリングされたコンテンツ領域の左上を基準にします。この参照ポイントは、左上のURLバーと戻るボタンの下にあります。このポイントは、ブラウザウィンドウ内のどこにでもある可能性があり、ページ内に埋め込まれたスクロール可能なページがあり、ユーザーがスクロールバーを動かすと、実際に場所を変更できます。
screenXand screenY：
物理的な画面/モニターの左上を基準にして、この基準点は、モニターの数またはモニターの解像度を増減した場合にのみ移動します。
clientXand clientY：ブラウザウィンドウ
のコンテンツ領域（ビューポート）の左上端を基準にします。ユーザーがブラウザ内からスクロールバーを移動しても、このポイントは移動しません。
どのブラウザーがどのプロパティをサポートするかについてのビジュアル：
http://www.quirksmode.org/dom/w3c_cssom.html#t03
w3schoolsには、Javascriptのオンラインインタープリターとエディターがあり、それぞれの機能を確認できます
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>pageYとの違いを説明する画像は次のとおりclientYです。
以下のための同じpageXおよびclientXそれぞれ。
pageX/Y 座標は、レンダリングされたページ全体（スクロールによって非表示にされた部分を含む）の左上隅を基準にします。
ながらclientX/Y座標は、ページの可視部分の左上隅に対するもので、ブラウザウィンドウを介して「見えます」。
デモを見る
おそらく必要ないでしょう screenX/Y
screenX/Y？
pageX/pageY代わりに使用する必要がありclientX/clientYますか？
- pageX / Yは、
<html>CSSピクセルで要素に関連する座標を提供します。 - clientX / Yは、
viewportCSSピクセルを基準とした座標を提供します。 - screenX / Yは、
screenデバイス内のピクセルを基準とした座標を示します。
デスクトップとモバイルのブラウザーで計算が似ているかどうかという最後の質問について...モバイルブラウザーでの理解を深めるために、レイアウトビューポートとビジュアルビューポートという2つの新しい概念を区別する必要があります。ビジュアルビューポートは、現在画面に表示されているページの一部です。レイアウトビューポートは、デスクトップブラウザーにレンダリングされた（現在のビューポートに表示されないすべての要素を含む）ページ全体の同義語です。
モバイルブラウザーでは、pageXおよびpageYはCSSピクセルのページに対して相対的であるため、ドキュメントページに対するマウス座標を取得できます。一方、ビジュアルビューポートに関連するマウス座標clientXをclientY定義します。
ビジュアルビューポートとレイアウトビューポートの違いに関する別のstackoverflowスレッドがここにあります：ビジュアルビューポートとレイアウトビューポートの違い？
別の優れたリソース：http : //www.quirksmode.org/mobile/viewports2.html
私を助けたのは、このページにイベントを直接追加し、自分でクリックして回りこむことでした。開発者ツール/ Firebugなどでコンソールを開き、これを貼り付けます：
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このスニペットを使用すると、スクロール、ブラウザウィンドウの移動などのクリック位置を追跡できます。
一番上までスクロールしても、pageX / YとclientX / Yは同じです。
それらの違いは、現在どのブラウザを参照しているかによって大きく異なります。それぞれがこれらのプロパティを別々に実装するか、まったく実装しません。Quirksmodeには、DOMやJavaScriptイベントなどのW3C標準に関するブラウザの違いに関する優れたドキュメントがあります。