jsによるマウス位置取得の詳細解説 例_javascriptスキル

この記事の例では、jsでマウスの位置を取得する方法を説明しています。参考のために皆さんと共有してください。詳細は次のとおりです:

JavaScript を使用して現在のページ上のマウス (カーソル) 位置を取得することは、ドラッグ アンド ドロップ、ツールチップなど、さまざまな状況で使用されます。もちろん、ここでもブラウザの互換性の問題に直面する必要があります。ブラウザごとにこれらの関連属性の処理方法が異なります。その違いと、ブラウザがこれらの属性を処理する場合の最終的な解決策について詳しく説明します。

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

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>

使用方法:

document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
}

コードの詳細な説明は次のとおりです:

まず evnet オブジェクトを宣言する必要があります。動き、クリック、キーの押下などに関係なく、event はグローバル変数であり、window.event に保存されます。 Firefoxなどのブラウザの場合は、対応する関数でイベントを取得します。 document.onmousemoveにmouseMove関数を割り当てると、mouseMoveはマウス移動イベントを取得します。

ev がすべてのブラウザでイベント イベントを取得するために、「||window.event」は Firefox では機能しません。ev にはすでに値が割り当てられているためです。 MSIE では ev は空なので、 window.event を取得します。

この記事ではマウスの位置を複数回取得する必要があるため、event という 1 つのパラメーターを含む MousePosition 関数を設計しました。

MSIE およびその他のブラウザーで実行するため、500*500 のウィンドウとマウスがある場合、Firefox およびその他のブラウザーは、ドキュメントに対するマウスの位置を表すために、event.pageX およびevent.pageY を使用します。が絶対真ん中にある場合、pageX と pageY の値は両方とも 250 で、500 スクロールダウンすると、pageY は 750 になります。

MSIE はその逆で、event.clientX と events.clientY を使用して、マウスがドキュメントではなくウィンドウの位置と同等であることを示します。同じ例で、下に 500 スクロールしても clientY は 250 のままであるため、ドキュメントに関連するscrollLeft プロパティとscrollTop プロパティを追加する必要があります。最後に、MSIE のドキュメントは 0,0 から始まりませんが、通常は小さな境界線 (通常は 2 ピクセル) があり、これらの境界線のサイズも document.body.clientLeft と clientTop で定義されます。

完全なコード:

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
   if(ev.pageX || ev.pageY){
     return {x:ev.pageX, y:ev.pageY};
   }
   return {
     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
     y:ev.clientY + document.body.scrollTop - document.body.clientTop
   };
}
document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
   document.getElementByIdx('mouseXPosition').value = mousePos.x;
   document.getElementByIdx('mouseYPosition').value = mousePos.y;
}
</script>

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。