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;
}