clientX、pageX、offsetX、screenX の違い

これらの属性の違いを見分けるのは難しいですが、長い間使用していない場合は、違いを忘れてしまい、どれがどれであるかを思い出せないことがわかります。どれの！本当にクレイジーです！

違い:

クライアントX、クライアントY:

ブラウザウィンドウの表示領域を基準としたX、Y座標（ウィンドウ座標）。表示領域にはツールバーとスクロールバーは含まれません。 IE イベントと標準イベントは両方とも、これら 2 つのプロパティを定義します。

ページ X、ページ Y:

clientX および clientY に似ていますが、ウィンドウ座標の代わりにドキュメント座標を使用します。これら 2 つのプロパティは標準プロパティではありませんが、広くサポートされています。 IE イベントにはこれら 2 つの属性はありません。

オフセットX、オフセットY:

イベント ソース要素 (srcElement) の X 座標と Y 座標を基準として、IE イベントのみがこれら 2 つの属性を持ち、標準イベントには対応する属性がありません。

スクリーンX、スクリーンY:

ユーザーのモニター画面の左上隅を基準とした X、Y 座標。標準イベントと IE イベントは両方とも、これら 2 つのプロパティを定義します。

実際、これらの違いは覚えやすいです。実際、これは英語の単語の意味ですが、大多数の中国人にとっては非常に混乱するでしょう。

client はクライアント、クライアントはブラウザであり、ブラウザを基準とした座標です。

ページはドキュメントであり、Webページを基準とした座標、つまりブラウザーとスクロールバーの表示領域を基準とした座標です。

offset はオフセットで、ソース要素に対する相対的なオフセット位置です。

screen は画面であり、画面を基準とした座標です。

これで覚えやすくなりますよ~