スクリーン状
モニター画面の左上隅からのマウスオフセット
ページー
ページの左上隅からのマウスのオフセット（その値は、スクロールバーの影響を受けません）
このプロパティはIE9ではサポートされていません
ただし、コードを作成して計算できます。 jQueryでの実装：
コードコピーは次のとおりです。
//欠落している場合はpagex/yを計算し、clientx/yが利用可能である場合
if（event.pagex == null && original.clientx！= null）{
eventDoc = event.target.OwnerDocument ||書類;
doc = eventdoc.documentelement;
body = eventdoc.body;
event.pagex = original.clientx +（doc && doc.scrollleft || body && body.scrollleft || 0） - （doc && doc.clientleft ||| body && body.clientleft || 0）;
event.pagey = original.clienty +（doc && doc.scrolltop || body && body.scrolltop || 0） - （doc && doc.clienttop || body && body.clienttop || 0）;
}
簡単に実装してください。
ブラウザビューポートに対するマウスのオフセットに加えて、ドキュメントのスクロールバーの隠された高さは、ドキュメントのクライアントトップを差し引いたものです。
コードコピーは次のとおりです。
var pagey = event.clienty +document.documentlement。 scrolltop-document.documentelement.clienttop
document.documentelement.clienttopを減算する理由
これは、IE8に基づくブラウザ固有のドキュメントのオフセットです。 HTMLが0に設定されていても、体のパディングとマージンはその価値に影響しません。
IE7でテストされた、取得
コードコピーは次のとおりです。
document.documentelement.clienttop-> 2px document.documentelement.clientleft-> 2px
document.bocy.clienttop-> 0px document.body.clientleft-> 0px
クライアント
ブラウザビューポートの左上隅からのマウスオフセット
ClientyとPageyの違いに注意してください。クライアントの値は、ページにスクロールバーがない場合、Pageyと同等です。
- - - - - - - - - - - - - - - - - セグメンテーション - - - - - - - - - - - - - - - - - - - - - - - -
レイリー
要素の位置スタイルがデフォルトの静的ではない場合、この要素には位置決め属性があると言います。
現在マウスイベントとその祖先要素をトリガーしている要素に位置付け属性を持つ最も近い要素を見つけ、そこからマウスのオフセット値を計算して、要素の境界の左上隅にある外交点を相対点として見つけます。位置決め属性を持つ要素が見つからない場合、オフセットは現在のページと同等の現在のページに対して計算されます。
この属性はIE9ではサポートされていませんが、一意のオフセイティに置き換えることができます。
Offsety
IE固有のプロパティ
OffsetyとLayeryの違いは、オフセット値を計算する場合、前者は要素の境界の左上隅の内側の交差点に相対的であることです。したがって、マウスが要素の境界にある場合、オフセット値は負の値です。さらに、Offsetyは、イベントをトリガーする要素に配置属性があるかどうかを気にしません。イベントをトリガーする要素に対するオフセット値を常に計算します。
LayeryとOffsetyの違いを考えると、互換性のある2つの使用に注意を払う必要があります。
1.イベントをトリガーする要素は、位置決め属性を設定する必要があります。
2。要素が上部のボーダートップを持っている場合、レイリーはOffsetyの値よりも1つのボーダートップ幅の値を持っています。
コードコピーは次のとおりです。
// element.bordertopwidthは、実際に計算された要素の上部境界幅でなければなりません。
var bordertopwidth = window.getcomputedStyle？ window.getComputedStyle（element、null）.bordertopwidth：element.currentstyle.bordertopwidth;
var offsety = event.offsety ||（event.layery + bordertopwidth）;
レイリーおよびオフセティのプロパティを通じて、マウスのオフセットをバインドされたマウスイベント要素と比較して計算することは非常に便利です。これは、時には非常に便利です。
ここでは、マウスの垂直方向のオフセット属性について説明します。水平方向のオフセットは似ているので、もう説明しません。
上記はこの記事のすべてです。あなたがそれを気に入ってくれることを願っています。