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 이벤트.pageX;
else if (이벤트.clientX)
   반품 이벤트.clientX (문서. documentElement.scrollLeft ?
   document.documentElement.스크롤왼쪽 :
   문서.본문.왼쪽으로 스크롤);
else return null;
}
기능 mouseY(evt ) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
   반품 evt.clientY (문서.documentElement.scrollTop ?
   문서.documentElement.scrollTop :
   문서.본문.scrollTop);
else 반품 null;
}
마우스 커서 위치
토론 참여
질문이 있으신가요? 댓글?
최근까지 브라우저 내에서 마우스 커서의 위치를 ​​결정하는 표준 방법이 없었습니다. W3C 표준에서는 이벤트가 트리거될 때 브라우저 창 내의 현재 마우스 커서 위치를 event.clientX 및 event.clientY로 제공하여 각각 브라우저 창의 왼쪽과 위쪽으로부터의 거리를 얻어야 한다고 말합니다.
이를 다양한 브라우저에서 테스트한 결과 Internet Explorer 6, Netscape 6, Firefox 및 Opera 7이 모두 이러한 필드의 브라우저 창을 기준으로 마우스 좌표에 대해 올바른 값을 생성하는 것으로 나타났습니다. 웹 페이지 내에서 위치를 얻으려면 브라우저 창 내에서 페이지의 스크롤 위치를 추가하기만 하면 됩니다.
Opera 5 및 6에서는 이러한 필드에 대한 값을 생성했지만 값은 브라우저 창을 기준으로 하는 것이 아니라 웹 페이지 상단을 기준으로 하므로 스크롤 위치를 추가하면 이러한 브라우저에서 잘못된 결과가 생성됩니다. Netscape 4는 이러한 필드를 전혀 이해하지 못하므로 이 코드를 단독으로 사용하면 오류가 발생합니다.
추가적인 문제 중 하나는 Internet Explorer가 페이지의 스크롤 위치를 결정하기 위해 두 가지 다른 방법을 사용한다는 것입니다. 버전 6 이전 버전과 선언된 DOCTYPE이 없거나 전환 DOCTYPE이 선언된 버전 6에서는 document.body.scrollLeft 및 document.body.scrollTop을 사용합니다. 엄격한 DOCTYPE을 사용하여 IE6을 선언하면 document.documentElement.scrollLeft 및 document.documentElenent.scrollTop이 대신 사용됩니다. 다른 브라우저에서는 이러한 값 중 하나를 사용하거나 pageXOffset 및 pageYOffset을 사용합니다.
W3C 표준의 일부는 아니지만 유용한 마우스 커서 위치를 제공하는 또 다른 필드 쌍이 있습니다. Internet Explorer와 Opera 5, 6을 제외하고 제가 언급한 모든 브라우저는 웹 페이지 자체의 왼쪽 상단을 기준으로 마우스 커서 위치를 제공하는 event.pageX 및 event.pageY도 지원합니다. 이 필드를 사용하면 페이지의 스크롤 위치를 추가할 필요가 없습니다.
이 두 가지 방법에 대한 테스트를 결합하여 Internet Explorer, Netscape 4, Firefox 및 Opera 7에서 작동하는 마우스 커서 위치를 찾는 코드를 만들 수 있습니다. 웹 페이지에서 적절한 위치를 검색하려면 이벤트를 다음 함수에 전달하기만 하면 됩니다.
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 필드는 제가 테스트한 모든 브라우저에 정의되어 있습니다. 화면의 왼쪽 상단을 기준으로 마우스 커서의 위치를 ​​제공합니다. 브라우저 창의 왼쪽 상단 모서리 위치를 알지 못하면 이 정보는 웹 페이지와 상호 작용할 수 있는 측면에서 그다지 유용하지 않습니다.
event.x 및 event.y 필드는 Netscape 4, Internet Explorer 및 Opera 7에도 있습니다. Netscape 4에서 이러한 필드는 pageX 및 pageY 필드와 정확히 동일한 웹 페이지 내의 위치를 ​​제공합니다. 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 = new CPos(target.offsetLeft, target.offsetTop);
var 대상 = target.offsetParent;
while(대상)
{
pos.x = target.offsetLeft;
pos.y = target.offsetTop;
target = target.offsetParent
}
return pos;
}

下面是我自己开发项目中的实例：

复主代码 代码아래: