JavaScript_javascript スキルでのマウス位置関連属性の取得の概要

JavaScript にはマウス オブジェクトがありません。マウス座標の取得は強力なイベント オブジェクトに依存します。

ドキュメントのマウスの動きを監視することで、マウスの位置をリアルタイムで取得できます。

しかし！ ！イベントにはマウス関連の属性が多すぎて、非常に混乱しています。以下のように:

event.layerX	event.layerY
event.clientX	event.clientY
event.pageX	event.pageY
event.offsetX	event.offsetY
event.screenX	event.screenY
event.x	event.y

全部で6グループ！

それらの違いは明らかではなく、ブラウザーには互換性がありません。

この記事の目的は、それらの違いを明確にし、推奨されないものを選択することです。

テストコード

次のコードを直接実行します:

コードをコピー コードは次のとおりです:

http://www.w3.org/1999/xhtml"> />
<頭>

<スタイル>
ボディ {位置:相対;}
div {最小高さ: 300px; 背景色: #eee;}
#jg {右: 0; 上: 10px; 背景色: #f00;}

結果を表示

画面内 div

高くて広い。 。 。

オフスクリーン DIV

<スクリプト>
var jg = document.getElementById('jg');
document.onmousemove = 関数 (e) {
e = e || ウィンドウ.イベント;
jg.innerHTML = 'layerX:' e.layerX
',layerY:' e.layerY
',
clientX:' e.clientX
',clientY:' e.clientY
',
pageX:' e.pageX
',pageY :' e.pageY
',
offsetX:' e.offsetX
',offsetY:' e.offsetY
',
screenX:' e.screenX
',screenY:' e.screenY
',
x:' e.x
',y:' e.y;
}

テスト プロセス中に、アーティファクトが発見されました。Chrome (Google ブラウザ) と IE9 は、上記のすべての属性と完全に互換性があります。比較してみるととても便利です。

比較後の結果は次のとおりです:

各属性の説明

clientX と Y はブラウザのビューポートを基準としたマウスの座標です (つまり、スクロール バーの外側の部分は無視されます)。

ScreenX と Y は、画面全体の左側 (上端) を基準としたマウスの座標であり、基本的にドキュメントとは完全に互換性があります。

offsetX と Y は、現在ポイントされているオブジェクトを基準としたマウスの座標です。マウスがボタンをポイントしている場合、offsetX はボタンを基準としています。

x と y は、標準ブラウザの LayerX と Y と同じです。これらは、IE の LayerX を置き換えるために使用できる属性です

。

pageX と Y は、ページ全体の左側 (上端) を基準としたマウスの座標です。IE7 と 8 はこれらをサポートしていません。

キーポイント: LayerX と LayerY

LayerX と Y は、標準ブラウザによって導入された新しい属性であり、IE9 でもサポートされています。これは、offsetX と Y を置き換えるのに使用できます。ただし、これは、現在指している要素を基準とした位置情報を持つ最も近い要素の座標として定義されます。この「配置あり」とは、デフォルトでは配置されていない (つまり、静的ではない) CSS 属性があることを意味します。

現在ポイントされている要素が配置されている場合、layerX と Y はこの要素に関連する座標を返します。そうでない場合は、この要素の親タグを確認し、ルート要素まで続行します。 —— HTML ノード。

つまり、Firefox では、offsetX 値が必要な場合は、位置の位置情報を追加する必要があります。

互換性の概要:

1. Firefox は offsetX、offsetY、x、y 属性をサポートしていませんが、layerX で置き換えることができます。 2. ie の x と y は、Firefox&chrome; の LayerX と LayerY に相当します。 3. IE7 および 8 のドキュメント境界とブラウザー ウィンドウ境界の間には 2px の距離があるため、ウィンドウを最大化すると、最小 screenX は 2px になります。 4. ie9 のlayerX と Y には値がありますが、これは html タグに関連しているようです。たとえば、私の例のコードでは、スクロール バーを右端にドラッグし、ゆっくりとマウスを動かします。このとき、大きな DIV の右端と最初の DIV の右端の差も、layerX に計算されます。 。 。最後に要素が増えるほど、この計算は複雑になりますが、Firefox と chrome の LayerX にはこの問題はありません。したがって、IE9 では LayerX を使用しないでください。
5. Chrome では、x と y に値がありますが、それらは clientX と Y とまったく同じです。 したがって、x、y 属性の使用はお勧めできません。


互換性の修復

標準のブラウザでは、position およびevent.layerX を使用して、event.offsetX 属性を実装できます。

IE7 および 8 には、pageX、pageY はありません。それを見つけるには、document.documentElement.scrollLeftevent.clientX を使用することしかできません。

つまり、IE の x、y または offsetX、offsetY のいずれかを削除できます。