web-dev-qa-db-ja.com

ScreenX/Y、clientX/Y、pageX/Yの違いは何ですか？

screenX/Y、clientX/YおよびpageX/Yの違いは何ですか？

IPad Safariの場合も、計算はデスクトップの場合と似ていますか。それとも、ビューポートのために違いがありますか。

あなたが私に例を示すことができればそれは素晴らしいでしょう。

javascriptipadsafarimouse-position
507
hmthr

JavaScriptの場合：

pageX、pageY、screenX、screenY、clientX、およびclientYは、ある点が参照点からの物理的な「CSSピクセル」の数を示す数値を返します。イベントポイントはユーザーがクリックした場所で、参照ポイントは左上のポイントです。これらのプロパティは、その基準点からの水平方向と垂直方向の距離を返します。

pageXとpageY：
ブラウザの完全にレンダリングされたコンテンツ領域の左上を基準にしています。この参照点は、URLバーと左上の戻るボタンの下にあります。このポイントはブラウザウィンドウ内のどこにあってもよく、ページ内に埋め込まれたスクロール可能なページがあり、ユーザがスクロールバーを動かした場合は実際に場所を変更することができます。

screenXとscreenY：
実際の画面/モニターの左上を基準にして、この参照点はモニターの数またはモニターの解像度を増減した場合にのみ移動します。

clientXと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>
442
Eric Leschinski

これはpageYとclientYの違いを説明する図です。

pageY vs clientY

pageXとclientXについてもそれぞれ同じです。

pageX/Y座標は、レンダリングされたページ全体の左上隅を基準にしています（スクロールによって非表示になっている部分を含む）。

clientX/Y座標はページの表示部分の左上隅を基準にしていますが、ブラウザウィンドウでは「見られます」。

デモを見る

おそらくscreenX/Yは必要ないでしょう

402
Dan
  1. pageX/Yは、CSSピクセルの<html>要素に相対的な座標を提供します。
  2. clientX/Yは、CSSピクセルのviewportに相対的な座標を提供します。
  3. screenX/Yは、デバイスピクセルのscreenに関連する座標を提供します。

計算がデスクトップブラウザーとモバイルブラウザーで類似している場合の最後の質問について...より良い理解のために-モバイルブラウザーで-2つの新しい概念を区別する必要があります：layout viewportおよびビジュアルビューポート。視覚的なビューポートは、現在画面に表示されているページの一部です。レイアウトビューポートは、デスクトップブラウザーでレンダリングされたページ全体の同義語です（現在のビューポートでは表示されないすべての要素を含む）。

モバイルブラウザでは、pageXとpageYはCSSピクセル単位のページに相対的であるため、ドキュメントページに対するマウス座標を取得できます。一方、clientXとclientYは、ビジュアルビューポートに関連してマウス座標を定義します。

ここには、ビジュアルビューポートとレイアウトビューポートの違いに関する別のstackoverflowスレッドがあります。 ビジュアルビューポートとレイアウトビューポートの違い？

別の優れたリソース： http://www.quirksmode.org/mobile/viewports2.html

110
Simo Endre

このページに直接イベントを追加して、クリックして自分自身のために手助けしてくれたのが私の役に立ちました！開発者ツール/ 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は同じです。

22
fierysunset

これらの違いは、現在どのブラウザを参照しているかによって大きく異なります。それぞれがこれらのプロパティを異なる方法で実装しているか、まったく実装していません。 Quirksmode には、DOMやJavaScriptイベントなどのW3C標準に関するブラウザの違いに関する優れたドキュメントがあります。

5
Dominic Barnes