JavaScriptにはマウスオブジェクトがなく、マウス座標を取得するための強力なイベントオブジェクトに依存します。
ドキュメントのMousemoveを聞くことで、マウスの位置をリアルタイムで取得できます。
しかし！ ！イベントにはマウスに関連する属性が多すぎますが、これは非常にエキサイティングです！次のように：
| 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つのグループ！
さらに、それらの違いは明らかではなく、ブラウザは互換性がありません！
この記事の目的は、それらの違いを明確にし、推奨されていないものを選択することです。
テストコード
次のコードを直接実行します。
コードコピーは次のとおりです。
<！doctype html> <br />
<html xmlns = "http://www.w3.org/1999/xhtml"> <br/>
<ヘッド> <br />
<Meta charset = "utf-8" /> < /p>
<style>
ボディ{位置：相対;}
div {min-height：300px;バックグラウンドカラー：#eee;}
#jg {右：0;トップ：10px;位置：修正;バックグラウンドカラー：＃f00;}
</style>
<p> < /head> <br />
<body> <br />
<span id = "jg">結果を表示< /span> <br />
<入力型= "button" value = "a button" /> < /p>
<div> div inscreen </div>
<div style = "height：1000px; width：2000px; background：#ddd;">非常に高く幅。 。 。 </div>
<div>オフスクリーンdiv </div>
<p> < /body> <br />
<スクリプト>
var jg = document.getElementById（ 'jg'）;
document.onmousemove = function（e）{
e = e || window.event;
jg.innerhtml = 'layerx：'+e.layerx+
'、レイリー：'+e.layery+
'、<br/> clientx：'+e.clientx+
'、clienty：'+e.clienty+
'、<br/> pagex：'+e.pagex+
'、pagey：'+e.pagey+
'、<br/> offsetx：'+e.offsetx+
'、Offsety：'+e.offsety+
'、<br/> screenx：'+e.screenx+
'、Screeny：'+E.Screeny+
'、<br/> x：'+e.x+
'、y：'+ey;
}
< /script> <br />
</html>
テスト中、魔法のツールを見つけました。Chrome（Google Chrome）とIE9は、上記のすべての属性と互換性があります！それらを比較するのは非常に便利です。
比較後、結果は次のとおりです。
各属性の定義
ClientXとYは、ブラウザビューポート（つまり、スクロールバーの外側の部品が無視されます）に対するマウスの座標です。すべてのブラウザはそれをサポートしています。
ScreenxとYは、画面全体の左（上端）に対するマウスの座標であり、基本的にドキュメントに接触していません。完全に互換性があります。
OffsetXとYは、現在指しているオブジェクトに対するマウスの座標です。この時点でマウスがボタンを指すと、OffsetXはこのボタンに関連しています。 Firefoxはサポートしていません
xおよびy、rayerxおよびyは、同じ標準ブラウザーで、IEのlayerxを置き換えるために使用できる属性です。
Pagexとyは、ビューポートの外側を含む、ページ全体の左（上端）に対するマウスの座標です。 IE7と8はサポートしていません。
キーポイント：レイヤーックスとレイリー
layerxとyは、標準のブラウザによってリリースされた新しい属性であり、IE9もそれらをサポートしています。彼はOffsetxとYの代わりに使用できます。しかし、彼の定義は次のとおりです。現在の指さし要素に対するポジショニング情報を持つ要素の座標。この「配置」とは、非デフォルトの位置を持つCSS属性（すなわち、非静的）を指します。
現在尖っている要素が配置されている場合、layerxとyはこの要素に対する座標を返します。それ以外の場合は、この要素の親タグを確認します。まだポジショニングがない場合は、続行します。ルート要素まで-HTMLノード。
したがって、Firefoxでは、offsetx値をoffsetxにする場合は、位置情報を追加する必要があります。
互換性の概要：
1。FirefoxはOffsetx、OffSey、X、Y属性をサポートしていませんが、それらはlayerxに置き換えることができます。
2。IEのxとyは、Firefox＆Chromeの層と層に相当します。
3. IE7と8のドキュメントの境界は、ブラウザウィンドウの境界から2px離れているため、ScreenXの最大距離はウィンドウを最大化すると2pxです。
4. IE9のlayerxとyには値がありますが、それらは不可解に間違っています。それらはHTMLタグに関連しているようです。たとえば、私の例コードでは、スクロールバーを右端にドラッグすると、マウスはゆっくりと空白から大きなdivに移動します。この時点で、最初のDivの右端と右端の違いもLayerxに含まれます。 。 。最後にはますます多くの要素があるため、計算はより複雑です。 FirefoxとChromeの層はこの問題を抱えていません。したがって、IE9でlayerxを使用しないでください。
5。Chromeでは、XとYには値がありますが、clientxとyとまったく同じです！したがって、x、y属性を使用することはお勧めしません。
互換性の治療法
標準のブラウザーでは、expos.offsetx属性を実装するために、spotion and event.layerxを使用できます。
IE7にはpagexまたはpageyはありません。 document.documentlement.scrollleft+event.clientxのみを使用して、それを見つけることができます。
したがって、IEのx、y、またはoffsetxおよびOffsetyの1つを削除できます。