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. The standards say that this current mouse cursor position within the browser window as an event is triggered should b e 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 with a number of different browsers and have found that Internet Explorer 6, Netscape 6+, Firefox, and Op ERA 7+ all produce correct values for the mouse coordinates relative to the browser windows in these fields. To obtain the position within the Web page you would simply add the scroll of the page position the within window.
Opera 5 and 6 produced values for this fields but the values are relative to the top of the Web page instead of relative to the browser windows and so adding the scroll position would produce a wrong. Netscape 4 doesn ' t understand these fields in all and so would give a error if this code were used by itself.
One added complication is this Internet Explorer uses two different ways to determine the scroll the page. It uses Document.body.scrollLeft and Document.body.scrollTop in versions before version 6 as as as "in" version 6 when the Re is no DOCTYPE declared or a transitional DOCTYPE is declared. When IE6 is declared using a strict DOCTYPE document.documentElement.scrollLeft and Document.documentElenent.scrollTop ar E used instead. Other browsers either use one of these values or Pagexoffset and pageYOffset.
Although not part of the "standards there is another pair of fields that would give the position of the mouse cursor tha T is useful. With the exception's Internet Explorer and Opera 5 and 6, all of the browsers I have mentioned also support Event.pagex a nd event.pagey which give the mouse cursor position to the top left relative the Web page corner. Using These fields your do not have to add the scroll position of the page.
By combining tests for both of this methods together we can create code to locate the mouse cursor position that would wor K on Internet Explorer, Netscape 4+, Firefox, and Opera 7+. You are just need to pass the event to the following functions to retrieve the "appropriate" on the Web page.
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;
}
There are a couple of the 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 to the browser window This information isn't 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. In Internet Explorer and Opera 8 They give the position of the mouse cursor within the current object (if this object is P Ositioned Absolute, relative, or fixed) or within the page (for static objects). Opera 7 appears to use this fields to give the position of the mouse cursor relative to the bottom left corner of the SCR Een.
There are other situations:
Call Method:
Copy Code code as follows:
var pos=getobjpos (ID);
function CPos (x, y)
{
this.x = x;
This.y = y;
}
Get the position of the control
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;
}
Here are some examples of my own development projects:
Copy Code code 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.WebSite.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) {
$ (' # ' +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.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft ),
Y:ev.clienty + (Document.documentElement.scrollTop document.documentElement.scrollTop:document.body.scrollTop)
};
}
Document.onmousemove = MouseMove;
</script>
