The script written yesterday has some problems when obtaining the mouse position. When there is always a scroll bar in IE, it is found that document. body. scrollTop does not play a role.
Later, I searched for an article in google, "Mouse Cursor Position", which detailed the browser Mouse location issue. Different browsers have different positioning standards for the mouse, and even different versions of ie have different positioning support.
Document. body. scrollLeft, document. body. scrollTop is only used in versions earlier than IE6. in IE6, if DOCTYPE is not declared or transitional doctypeis declared, ie6will use document.doc umentElement. scrollLeft to obtain the absolute position of the mouse.
Record the functions provided by Stephen Chapman.
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 ) ;
Else Return 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 ) ;
Else Return Null ;
}
Mouse Cursor Position
Join the Discussion
Questions? Comments?
Until recently there was no standard way of determining the position of the mouse cursor within the browser. the W3C standards say that the current mouse cursor position within the browser window when an event is triggered shoshould be given by event. clientX and event. clientY to obtain the distance from the left and top of the browser window respectively.
I have tested this in a number of different browsers and have found that Internet Explorer 6, Netscape 6 +, Firefox, and Opera 7 + all produce correct values for the mouse coordinates relative to the browser window in these fields. to obtain the position within the web page you wowould simply add the scroll position of the page within the browser window.
Opera 5 and 6 produced values for these fields but the values are relative to the top of the web page instead of relative to the browser window and so adding the scroll position wowould produce a wrong result these browsers. netscape 4 doesn' t understand these fields at all and so wowould give an error if this code were used by itself.
One added complication is that Internet Explorer uses two different ways to determine the scroll position of the page. it uses document. body. scrollLeft and document. body. scrollTop in versions before version 6 as well as in version 6 when there is no DOCTYPE declared or a transitional DOCTYPE is declared. when IE6 is declared using a strict DOCTYPE document.doc umentElement. scrollLeft and document.doc umentElenent. scrollTop are used instead. other browsers either use one of these values or pageXOffset and pageYOffset.
Although not part of the W3C standards there is another pair of fields that will give the position of the mouse cursor that is useful. with the exception of Internet Explorer and Opera 5 and 6, all of the browsers I have mentioned also support event. pageX and event. pageY which give the mouse cursor position relative to the top left corner of the web page itself. using these fields you do not have to add the scroll position of the page.
By combining tests for both of these methods together we can create code to locate the mouse cursor position that will work on Internet Explorer, Netscape 4 +, Firefox, and Opera 7 +. you just need to pass the event to the following functions to retrieve the appropriate position on the web page.
Function mouseX (evt ){
If (evt. pageX) return evt. pageX;
Else if (evt. clientX)
Return evt. clientX + (document.doc umentElement. scrollLeft?
Document.doc umentElement. scrollLeft:
Document. body. scrollLeft );
Else return null;
}
Function mouseY (evt ){
If (evt. pageY) return evt. pageY;
Else if (evt. clientY)
Return evt. clientY + (document.doc umentElement. scrollTop?
Document.doc umentElement. scrollTop:
Document. body. scrollTop );
Else return null;
}
There are a couple of other pairs of fields that give mouse cursor positions that are less useful. the fields event. screenX and event. screenY are defined in all of the browsers I tested. they give the position of the mouse cursor relative to the top left corner of the screen. without knowing the position of the top left corner of the browser window this information is not very useful with respect to being able to interact with the web page.
The fields event. x and event. y also exist in Netscape 4, Internet Explorer, and Opera 7 +. in Netscape 4 these fields give the position within the web page exactly the same as the pageX and pageY fields. in Internet Explorer and Opera 8 they give the position of the mouse cursor within the current object (if that object is positioned absolute, relative, or fixed) or within the page (for static objects ). opera 7 appears to use these fields to give the position of the mouse cursor relative to the bottom left corner of the screen.
Other cases:
Call method:
Copy codeThe Code is as follows:
Var pos = GetObjPos (ID );
Function CPos (x, y)
{
This. x = x;
This. y = y;
}
// Obtain the widget location
Function GetObjPos (ATarget)
{
Var target = ATarget;
Var pos = new CPos (target. offsetLeft, target. offsetTop );
Var target = target. offsetParent;
While (target)
{
Pos. x + = target. offsetLeft;
Pos. y + = target. offsetTop;
Target = target. offsetParent
}
Return pos;
}
The following is an example of my own development project:
Copy codeThe Code is as follows:
<Script type = "text/jscript" language = "jscript">
Function showPopup (obj, evt ){
Var strDate = $ (obj). attr ('datetime ');
Var strUserName = $ (obj). attr ('username ');
Var id = "event _" + strDate. replace (/-/g ,'');
Var box = $ ('#' + id );
If (box. length = 0 ){
$ (Document. body). append ("<div id = '" + id + "'class = 'popupinfo'> </div> ");
Box = $ ('#' + id );
Box.css ("position", "absolute ");
Box.css ("display", "block ");
Box.css ("z-index", "100 ");
Box. append ('<input id = "File1" type = "image" src = "../Images/Onload.gif"/> ');
Microsoft. PMWeb. Web. SiteService. GetEventInfoByDate (strUserName + "#" + strDate, onSuccess, onFailed, "1111 ");
}
Else {
Var imgLoad = box. find (": image ");
ImgLoad.css ("display", "none ");
}
Var objQueryPosition = GetObjPos (obj );
Box.css ("left", mousePos. x );
Box.css ("top", mousePos. y );
Box.css ("display ","");
Function onSuccess (result, context, methodName ){
Var imgLoad = box. find (": image ");
ImgLoad.css ("display", "none ");
Box. append (result );
}
Function onFailed (error, context, methodName ){
Var errorMessage = error. get_message ();
Alert ("Review Failed:" + 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 ){
Certificate ('users' id).css ("display", "none ");
}
}
Var mousePos;
Function mouseMove (ev ){
Ev = ev | window. event;
MousePos = mouseCoords (ev );
}
Function mouseCoords (ev ){
If (ev. pageX | ev. pageY ){
Return {x: ev. pageX, y: ev. pageY };
}
Return {
X: ev. clientX + (document.doc umentElement. scrollLeft? Document.doc umentElement. scrollLeft: document. body. scrollLeft ),
Y: ev. clientY + (document.doc umentElement. scrollTop? Document.doc umentElement. scrollTop: document. body. scrollTop)
};
}
Document. onmousemove = mouseMove;
</Script>
