678

screenX/ Y、clientX/YとpageX/の違いは何Yですか?

また、iPad Safari の場合、計算はデスクトップの場合と似ていますか?それとも、ビューポートが原因で何らかの違いがありますか?

例を挙げていただければ幸いです。

4

7 に答える 7

543

JavaScript の場合:

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

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

screenXおよびscreenY:
物理的な画面/モニターの左上を基準にして、この基準点は、モニターの数またはモニターの解像度を増減した場合にのみ移動します。

clientXおよびclientY:ブラウザー ウィンドウのコンテンツ領域 (ビューポート
) の 左上端を基準とします。ユーザーがブラウザ内からスクロールバーを移動しても、このポイントは移動しません。

どのブラウザーがどのプロパティをサポートしているかのビジュアルの場合:

http://www.quirksmode.org/dom/w3c_cssom.html#t03

<script>
    function showCoordinates(event){
        var x = event.clientX;
        var y = event.clientY;
        alert(`X coordinates: ${x}, Y coordinates: ${y}`);
    }
</script>
<p onmousedown="showCoordinates(event)">
    Click this paragraph, and an alert box will show the x
    and y coordinates of the mouse relative to the viewport
</p>

于 2012-02-17T21:16:17.850 に答える
127
  1. pageX/Y<html>は、 CSS ピクセル単位の要素に対する座標を示します。
  2. clientX/Yviewportは、 CSS ピクセルに相対的な座標を示します。
  3. screenX/Yscreenは、デバイス内のピクセルに対する座標を示します。

デスクトップとモバイル ブラウザーで計算が似ているかどうかについての最後の質問について...モバイル ブラウザーで理解を深めるために、レイアウト ビューポートとビジュアル ビューポートという 2 つの新しい概念を区別する必要があります。ビジュアル ビューポートは、現在画面に表示されているページの一部です。レイアウト ビューポートは、デスクトップ ブラウザーでレンダリングされるフル ページ (現在のビューポートに表示されないすべての要素を含む) と同義です。

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

ここには、ビジュアル ビューポートとレイアウト ビューポートの違いに関する別のスタック オーバーフロー スレッドがあります: ビジュアル ビューポートとレイアウト ビューポートの違い?

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

于 2012-07-01T08:26:08.573 に答える
57

視覚的に説明できるものを言葉で説明するのは好きではありません。

ここに画像の説明を入力

于 2020-08-27T08:23:49.343 に答える
29

このページにイベントを直接追加して、自分でクリックするのが役に立ちました! 開発者ツール/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 は同じであることに注意してください。

于 2014-08-11T04:03:44.790 に答える
6

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

于 2011-05-20T14:42:56.587 に答える