Mouse_JavaScript スキルの絶対位置を取得するための JavaScript プログラム コードの紹介

まず、さまざまなブラウザでのイベント位置属性の分析:

1. IE のevent.x、event.y は、イベントをトリガーする要素の親要素の外側の世界に基づいています。
2. Firefoxのevent.pageX、event.pageYは、body要素を基準点として取得します(スクロール距離を含む)
3. events.clientX、event.clientYは、上部の要素を取得します。ブラウザの左隅を基準点として使用します (スクロール距離は含まれません)
4. IE のevent.offsetX、event.offsetY、Firefox のevent.layerX、event.layerY は、イベントトリガーの内側の境界の左上隅を取得します。要素を基準点として（スクロール距離を含む、境界線がある場合は負の数値が表示される場合があります）

次にDOMオブジェクトの高さ属性解析

1.scrollHeight: Getオブジェクトのスクロール高さ
2.scrollLeft: オブジェクトの位置を設定または取得します。ウィンドウの左端と現在表示されているコンテンツの左端との間の距離
3. 間の距離を設定または取得します。オブジェクトの上部とウィンドウ内の表示コンテンツの上部
4.scrollWidth: オブジェクトのスクロール幅を取得します
5. offsetHeight: 指定されたレイアウトまたは親座標に対するオブジェクトの高さを取得します。 offsetParent プロパティ
によって 6. offsetLeft: レイアウトまたは offsetParent プロパティで指定された親座標を基準にして計算されたオブジェクトの左側の位置を取得します。 Side Position
7. オブジェクトの計算された上部の位置を取得します。 offsetTop 属性で指定されたレイアウトまたは親座標へ

上記の分析では、位置を取得する 2 つの関数を記述します

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

// X 軸の位置を取得します
function MouseX (evt) {
// firefox
if (evt.pageX) return evt.pageX;
// IE
else if (evt.clientX)
return evt.clientX (document. documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
else return null;
}
// Y 軸の位置を取得します
function MouseY(evt) {
/ / firefox
if (evt) .pageY) return evt.pageY;
// IE
else if (evt.clientY)
return evt.clientY (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) ;
else return null;

HTML コントロールの絶対位置を取得する 2 つのメソッド

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

function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop ;
while (e = e.offsetParent) {
x = e.offsetLeft;
}
alert("x:" x " ," "y :" y);
}
function getAbsPoint(obj){
var x, y;
oRect = obj.getBoundingClientRect();
x = oRect.left
y = oRect.top
alert("(" x "," y ")")
}

注意

document.body .scrollLeft, document .body.scrollTop は、IE6 より前のバージョンでのみ使用されます。IE6 では、DOCTYPE が宣言されていない場合、または暫定的な DOCTYPE が宣言されている場合、IE6 は document.documentElement.scrollLeft を使用してマウスの絶対位置を取得します。