JS_javascript スキルを使用してマウスの位置 (マウス座標) を取得するコード

昨天写的脚本在获取鼠标位置的时候有些问题。在IE中始终当有滚动条的时候，发现document.body.scrollTop并没有起到作用。
后来在google中搜索到一篇文章Mouse Cursor Position，详细介绍了浏览器鼠标定位的问题。各个浏览器对鼠标定位的标准不一样，就连不通版本的ie对定位支持都不一样。
document.body.scrollLeft，document.body.scrollTop只用于IE6以前的版本，在IE6中，对没有宣告 DOCTYPE,或者宣告的是transitional DOCTYPE，那么IE6将使用document.documentElement.scrollLeft 来获取鼠标的绝对位置。

将Stephen Chapman提供的函数做个记录

関数 mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
return evt.clientX (ドキュメント. documentElement.scrollLeft ?
document.documentElement.scrollLeft :
ドキュメント.本文.scrollLeft);
else return null;
}
関数 マウスY(evt ) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
return evt.clientY (ドキュメント.documentElement.scrollTop ?
document.documentElement.scrollTop :
ドキュメント.body.scrollTop);
else return null;
}
マウス カーソルの位置
ディスカッションに参加
ご質問がありますか?コメント?
最近まで、ブラウザ内のマウス カーソルの位置を決定する標準的な方法はありませんでした。 W3C 標準では、イベントがトリガーされたときのブラウザ ウィンドウ内の現在のマウス カーソルの位置を、ブラウザ ウィンドウの左と上からの距離をそれぞれ取得するために、event.clientX とevent.clientY で指定する必要があると規定しています。
これをさまざまなブラウザでテストしたところ、Internet Explorer 6、Netscape 6、Firefox、Opera 7 はすべて、これらのフィールドでブラウザ ウィンドウを基準としたマウス座標の正しい値を生成することがわかりました。 Web ページ内の位置を取得するには、ブラウザ ウィンドウ内のページのスクロール位置を追加するだけです。
Opera 5 と 6 ではこれらのフィールドの値が生成されましたが、値はブラウザ ウィンドウではなく Web ページの上部を基準としたものであるため、スクロール位置を追加すると、これらのブラウザでは誤った結果が生成されます。 Netscape 4 はこれらのフィールドをまったく理解できないため、このコードを単独で使用するとエラーが発生します。
さらに複雑なのは、Internet Explorer がページのスクロール位置を決定するために 2 つの異なる方法を使用していることです。バージョン 6 より前のバージョン、および DOCTYPE が宣言されていない場合、または移行期の DOCTYPE が宣言されている場合は、バージョン 6 で document.body.scrollLeft および document.body.scrollTop を使用します。 IE6 が厳密な DOCTYPE を使用して宣言されている場合、代わりに document.documentElement.scrollLeft および document.documentElenent.scrollTop が使用されます。他のブラウザは、これらの値のいずれか、または pageXOffset および pageYOffset を使用します。
W3C 標準の一部ではありませんが、マウス カーソルの位置を示す便利なフィールドのペアがもう 1 つあります。 Internet Explorer と Opera 5 および 6 を除いて、ここで説明したすべてのブラウザは、Web ページ自体の左上隅を基準としたマウス カーソルの位置を示すevent.pageX およびevent.pageY もサポートしています。これらのフィールドを使用すると、ページのスクロール位置を追加する必要がありません。
これらの両方のメソッドのテストを組み合わせることで、Internet Explorer、Netscape 4、Firefox、Opera 7 で動作するマウス カーソルの位置を特定するコードを作成できます。 Web ページ上の適切な位置を取得するには、イベントを次の関数に渡すだけです。
function MouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
return evt.clientX (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
それ以外の場合は null を返します。
}
function MouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
return evt.clientY (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
それ以外の場合は null を返します。
}
あまり役に立たないマウス カーソルの位置を示すフィールドのペアが他にもいくつかあります。フィールドevent.screenXとevent.screenYは、テストしたすべてのブラウザで定義されています。これらは、画面の左上隅を基準としたマウス カーソルの位置を示します。ブラウザ ウィンドウの左上隅の位置がわからないと、この情報は Web ページを操作する上であまり役に立ちません。
フィールドevent.xとevent.yは、Netscape 4、Internet Explorer、およびOpera 7にも存在します。 Netscape 4 では、これらのフィールドは、pageX および pageY フィールドとまったく同じ Web ページ内の位置を示します。 Internet Explorer および Opera 8 では、現在のオブジェクト内 (オブジェクトが絶対、相対、または固定に配置されている場合) またはページ内 (静的オブジェクトの場合) のマウス カーソルの位置が示されます。 Opera 7 はこれらのフィールドを使用して、画面の左下隅を基準としたマウス カーソルの位置を指定しているようです。
その他の状況:
使用方法:

复制代码 代以下:

var pos=GetObjPos(ID);
関数 CPos(x, y)
{
this.x = x;
this.y = y;
}
//取制御ファイルの位置
function GetObjPos(ATarget)
{
var target = ATarget;
var pos = 新しい CPos(target.offsetLeft, target.offsetTop);
var target = target.offsetParent;
while (ターゲット)
{
pos.x = target.offsetLeft;
pos.y = target.offsetTop;
target = target.offsetParent
}
位置を返します。
}

下は我开発行项目中の例:

复制代 代以下のように:

") ;
ボックス = $('#' id);
box.css("位置", "絶対");
box.css("表示", "ブロック");
box.css("z-index", "100");
box.append('');
Microsoft.PMWeb.WebSite.SiteService.GetEventInfoByDate(strUserName "#" strDate, onSuccess, onFailed, "1111");
}
else {
var imgLoad = box.find(":image");
imgLoad.css("表示", "なし");
}
var objQueryPosition = GetObjPos(obj);
box.css("left",mousePos.x);
box.css("top",mousePos.y);
box.css("表示", "");
function onSuccess(result, context, methodName) {
var imgLoad = box.find(":image");
imgLoad.css("表示","なし");
box.append(結果);
}
function onFailed(error, context, methodName) {
var errorMessage = error.get_message();
alert("レビュー失敗:" errorMessage);
}
}
function HidePopup(obj) {
var strDate = $(obj).attr('dateTime');
var strUserName = $(obj).attr('userName');
var id = "event_" strDate.replace(/-/g, '');
var box = $('#' id);
if (box.length != 0) {
$('#' id).css("display", "none");
}
}

var MousePos;
関数 MouseMove(ev) {
ev = ev ||ウィンドウ.イベント;
mousePos = MouseCoords(ev);
}
function MouseCoords(ev) {
if (ev.pageX || ev.pageY) {
return { x: ev.pageX, y: ev.pageY };
}
return {
x: ev.clientX (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft),
y: ev.clientY (document.documentElement.スクロールトップ ? document.documentElement.scrollTop : document.body.scrollTop)
};
}
document.onmousemove = マウス移動;