jsマウスの位置の例を取得します.
2623 ワード
この例では、jsがマウスの位置を取得する方法について述べている.皆さんに参考にしてあげます.具体的には以下の通りです.
javascriptで現在のページ上のマウス(カーソル)の位置を取得すると、ドラッグ&ドロップ、ストップメッセージなど、多くの場合に使われます.もちろん、ここでは依然としてブラウザの対応問題に直面しています.ブラウザによっては、これらの属性に関する処理方法も異なります.ここでは、ブラウザの属性の違いと最終的な解決方法を詳しく紹介します.
Javascriptコードは以下の通りです.
まずevnetオブジェクトを宣言します.移動、クリック、ボタンなどに関わらず、evnetをアクティブにします.インターネットExplorerでは、eventはグローバル変数です.window.eventに保存されます.firefoxや他のブラウザでは、対応する関数によって取得されます.mousemove関数をdocument.onmoemoemoveに割り当てます.mouse Moveはマウス移動イベントを取得します.
evがすべてのブラウザの下でイベントを取得するために、Firefoxの下で「ウィンドウズ.event」は機能しません.evはすでに割り当てられています.MSIEではevが空なので、window.eventを得ます.
この文章ではマウスの位置を何回も取得する必要があるので、パラメータ:eventを含むmousePosition関数を設計しました.
私たちはMSIEと他のブラウザで動作しますので、Firefoxと他のブラウザはevent.pageXとevent.pageYでドキュメントに対するマウスの位置を表しています.500*500のウィンドウがあり、マウスが絶対の中間にあると、PageXとPageYの値は250です.下に500をスクロールすると、PageYは750になります.
MSIEはちょうど反対に、文書ではなくevent.client Xとevent.client Yを使用して、マウスがウィンドウの位置に相当することを表しています.同じ例では、500を下にスクロールすると、clientYは相変わらず250です.したがって、scrollLeftとscrollTopの2つの属性を追加する必要があります.最後に、MSIEでは、ドキュメントは0からではなく、通常は小さなフレーム(通常は2ピクセル)があり、フレームのサイズはdocument.body.clientLeftとclientTopに定義されています.
完了コード:
javascriptで現在のページ上のマウス(カーソル)の位置を取得すると、ドラッグ&ドロップ、ストップメッセージなど、多くの場合に使われます.もちろん、ここでは依然としてブラウザの対応問題に直面しています.ブラウザによっては、これらの属性に関する処理方法も異なります.ここでは、ブラウザの属性の違いと最終的な解決方法を詳しく紹介します.
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);
}
コードについての詳細は以下の通りです.まずevnetオブジェクトを宣言します.移動、クリック、ボタンなどに関わらず、evnetをアクティブにします.インターネットExplorerでは、eventはグローバル変数です.window.eventに保存されます.firefoxや他のブラウザでは、対応する関数によって取得されます.mousemove関数をdocument.onmoemoemoveに割り当てます.mouse Moveはマウス移動イベントを取得します.
evがすべてのブラウザの下でイベントを取得するために、Firefoxの下で「ウィンドウズ.event」は機能しません.evはすでに割り当てられています.MSIEではevが空なので、window.eventを得ます.
この文章ではマウスの位置を何回も取得する必要があるので、パラメータ:eventを含むmousePosition関数を設計しました.
私たちはMSIEと他のブラウザで動作しますので、Firefoxと他のブラウザはevent.pageXとevent.pageYでドキュメントに対するマウスの位置を表しています.500*500のウィンドウがあり、マウスが絶対の中間にあると、PageXとPageYの値は250です.下に500をスクロールすると、PageYは750になります.
MSIEはちょうど反対に、文書ではなくevent.client Xとevent.client Yを使用して、マウスがウィンドウの位置に相当することを表しています.同じ例では、500を下にスクロールすると、clientYは相変わらず250です.したがって、scrollLeftとscrollTopの2つの属性を追加する必要があります.最後に、MSIEでは、ドキュメントは0からではなく、通常は小さなフレーム(通常は2ピクセル)があり、フレームのサイズはdocument.body.clientLeftとclientTopに定義されています.
完了コード:
// :
// :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;
}
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます.