マウスイベントのscreenY、pageY、clientY、layerY、offsetY属性の詳細解説_javascriptスキル

画面Y

モニター画面の左上隅を基準としたマウスのオフセット

Y ページ

ページの左上隅を基準としたマウスのオフセット (値はスクロール バーの影響を受けません)

この属性は IE9 ではサポートされていません

しかし、それを計算するためのコードを書くことはできます。 jQuery での実装:

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

// 不足していて clientX/Y が利用可能な場合は pageX/Y を計算します
if (event.pageX == null &&original.clientX != null ) {
EventDoc =event.target.ownerDocument || ドキュメント;
doc = イベントDoc.documentElement;
本文 = eventsDoc.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 );
}

とにかくシンプルにしましょう。

ブラウザのビューポートを基準としたマウスのオフセットに、ドキュメントのスクロール バーの非表示の高さを加えたものから、ドキュメントの clientTop を引いたもの。

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

var pageY = events.clientY document.documentElement.scrollTop-document.documentElement.clientTop

document.documentElement.clientTop を減算する理由

IE8以下のブラウザ特有のドキュメントのオフセットです。htmlやbodyのpaddingやmarginを0にしても、その値は影響を受けません。

iE7 でテストした結果、

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

document.documentElement.clientTop --> 2px document.documentElement.clientLeft --> 2px
document.bocy.clientTop --> 0px document.body.clientLeft --> 0px

クライアントY

ブラウザのビューポートの左上隅を基準としたマウスのオフセット

clienty と pagey の違いに注意してください。ページにローリング バーがない場合、Clienty の値は Pagey

と同等です。

----------------------------------分割---------- -- --------------------------------

レイヤーY

要素の位置スタイルがデフォルトの静的でない場合、この要素には位置決め属性があると言います。

現在マウス イベントをトリガーしている要素とその祖先要素の中から位置属性を持つ最も近い要素を検索し、それに対するマウスのオフセット値を計算し、要素の境界線の左上隅の外交点を検索します。相対的な点。位置決め属性を持つ要素が見つからない場合、オフセットは現在のページを基準にして計算されます。これは pageY に相当します。

この属性は IE9 ではサポートされていませんが、一意の offsetY に置き換えることができます

オフセットY

IE 固有のプロパティ

offsetY と LayerY の違いは、前者のオフセット値を計算する際、要素の境界線の左上隅の内側の交点を基準とすることです。したがって、マウスが要素の境界線上にあるとき、オフセット値が負の値です。 さらに、offsetY は、イベントをトリガーした要素に位置決め属性があるかどうかを考慮せず、常にイベントをトリガーした要素に対する相対的なオフセット値を計算します。

layerY と offsetY の違いを考慮して、互換性を持って使用することに注意する必要があります

1. イベントをトリガーする要素は位置属性を設定する必要があります。

2. 要素にボーダートップがある場合、layerY のボーダートップ幅の値は offsetY の値より 1 つ多くなります。

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

//ここでの element.borderTopWidth は、実際に計算された要素の上端の幅である必要があります。
var borderTopWidth = window.getComputedStyle ? window.getComputedStyle(element,null).borderTopWidth: element.currentStyle.borderTopWidth; var offsetY =event.offsetY||(event.layerY borderTopWidth);

layerY 属性と offsetY 属性を使用すると、マウス イベントにバインドされた要素に対するマウスのオフセットを簡単に計算できます。これは、特定の場合に非常に便利です。

垂直方向のマウスのオフセット プロパティについては、ここで詳しく説明します。水平方向のオフセット プロパティも同様であるため、再度説明しません。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。