Get Mouse Position

[iGuest 3]

Hi,Does anyone know a way to get the mouse co-ordinates from JavaScript? Im making a thing where you drag and drop objects on a page, and I know how to do it, except for this bit, so if anyone knows, that's help.Thanks!

[Sten 0]

Im gathering its for habble homes/spaces wotever u were gonna call it.anyway i got no idea but u could look on a real habbo home and look.

[vizskywalker 0]

Do simple search for it. There are several bajillion ways (by which I mean three or so, some of which do different things in different browsers). I could post specifics, but it is very well documented on websites and a simple search for "javascript mouse position" (minus the quotes) will get you many good results.~Viz

[TavoxPeru 0]

I hope this help you, it was taken from the O'Reilly Javascript and DHTML Cookbook:

 

To determine the mouse event location in the coordinate plane of the entire document, the getPageEventCoords( ) function shown in the following example has two main branches. The first gets the simpler pageX and pageY properties of the Netscape event object. For IE, many more calculations need to be carried out to derive the coordinates to accurately position an element at the specified location. The clientX and clientY properties need additional factors for any scrolling of the body content and some small padding that IE automatically adds to the body (normally two pixels along both axes). In the case of IE 6 running in CSS-compatibility mode, the html element's small padding must also be factored out of the equation.

 

function getPageEventCoords(evt) {

var coords = {left:0, top:0};

if (evt.pageX) {

coords.left = evt.pageX;

coords.top = evt.pageY;

} else if (evt.clientX) {

coords.left =

evt.clientX + document.body.scrollLeft - document.body.clientLeft;

coords.top =

evt.clientY + document.body.scrollTop - document.body.clientTop;

// include html element space, if applicable

if (document.body.parentElement && document.body.parentElement.clientLeft) {

var bodParent = document.body.parentElement;

coords.left += bodParent.scrollLeft - bodParent.clientLeft;

coords.top += bodParent.scrollTop - bodParent.clientTop;

}

}

return coords;

}

Deriving the event coordinates inside a positioned element is the job of the getPositionedEventCoords( ) function, shown in the following code listing. The IE branch, which supports the offsetX and offsetY properties of the event object, is the easy one here. Those values are relative to the coordinate plane of the positioned element target. On the Netscape side, the layerX and layerY properties need only an adjustment for the target element's borders. To prevent the event from propagating any further (and possibly conflicting with other onmousedown event targets), the event's cancelBubble property is set to true:

 

function getPositionedEventCoords(evt) {

var elem = (evt.target) ? evt.target : evt.srcElement;

var coords = {left:0, top:0};

if (evt.layerX) {

var borders = {left:parseInt(getElementStyle("progressBar",

"borderLeftWidth", "border-left-width")),

top:parseInt(getElementStyle("progressBar",

"borderTopWidth", "border-top-width"))};

coords.left = evt.layerX - borders.left;

coords.top = evt.layerY - borders.top;

} else if (evt.offsetX) {

coords.left = evt.offsetX;

coords.top = evt.offsetY;

}

evt.cancelBubble = true;

return coords;

}

A compatibility complication must be accounted for, however. If the outer element has a CSS border assigned to it, Netscape and IE (in any mode) disagree whether the coordinate plane begins where the border starts or where the content rectangle starts. Netscape includes the border; IE does not. Therefore, along the way, the situation is equalized by factoring out the border in the Netscape calculations. This is done with the help of the getElementStyle( ) function from Recipe 11.12:

 

function getElementStyle(elemID, IEStyleAttr, CSSStyleAttr) {

var elem = document.getElementById(elemID);

if (elem.currentStyle) {

return elem.currentStyle[iEStyleAttr];

} else if (window.getComputedStyle) {

var compStyle = window.getComputedStyle(elem, "");

return compStyle.getPropertyValue(CSSStyleAttr);

}

return "";

}

It may seem odd that deriving these kinds of event coordinates should be so laborious in one circumstance or the other. There is little justification for this, except perhaps that those who designed the event object and content-coordinate systems didn't envision how DHTML designers might utilize these features. The W3C DOM Level 2 event model is only partially helpful by defining two pairs of coordinate-related properties of the event object: clientX/clientY and screenX/screenY. But even then, the formal descriptions of the clientX and clientY properties—a coordinate at which the event occurred relative to the DOM implementation's client area—leave a lot to interpretation. Is the "client area" the page or just the visible portion of the page? Netscape interprets it as being the entire page, but IE's clientX and clientY properties (admittedly not based on the W3C DOM event model) are measures within the visible space of the document, thus requiring adjustments for document scrolling.

 

The W3C DOM Level 2 is mum on event coordinates within a positioned element. Of course, with some more arithmetic and element inspection, you can figure out those values from the style properties of the element and the event's clientX and clientY properties. The proprietary properties for offsetX/offsetY in IE and layerX/layerY in Netscape (a convenience holdover from Navigator 4) partially pick up the slack, but as you've seen, they're not universally perfect.

 

Even with the adjustments shown in the examples for this recipe, you may still encounter combinations of CSS borders, margins, and padding that throw off these careful calculations. If these CSS-style touches are part of the body element or the element you're positioning, you will probably have to experiment with adjustment values that work for the particular design situation of the page. In particular, inspect the offsetLeft, offsetTop, clientLeft, and clientTop properties of not only the direct elements you're working with, but also those within the containers that impact elements' offset measures (usually reachable through the offsetParent property, and further offsetParent chains outward to the html element). Also, don't overlook CSS border, margin, and padding thicknesses that might impact coordinate measures of the elements. Look for values that represent the number of pixels that your calculations miss. It's a tedious process, so be prepared to spend some time figuring it out. One size does not fit all.

 

Best regards,

Edited July 26, 2007 by TavoxPeru (see edit history)

[iGuest 3]

Replying to TavoxPeruWow, that's an excellent entry - I'm going to go buy that book immediately. I forgot how much I love O'Reilly references.-reply by Jason

[iGuest 3]

Get Mouse co-ordinates in javascriptGet Mouse Position

 

 

 

 

 

 

 

 

Get mouse position

[/size][size=4][size=4]<input type="hidden" name="MouseX"Id="MouseX" value="0" size="4">[/size][/size][size=4][size=4]<input type="hidden" name="MouseY"Id="MouseY" value="0" size="4">[/size][/size][size=4][size=4] [/size][/size][size=4][size=4] [/size][/size][size=4][size=4]		  [/size][/size][size=4][size=4]    <script>[/size][/size][size=4][size=4]		    var IE =Document.All?true:false[/size][/size][size=4][size=4] [/size][/size][size=4][size=4]		    // If NS --That is, !IE -- then set up for mouse capture[/size][/size][size=4][size=4]		    if (!IE)Document.CaptureEvents(Event.MOUSEMOVE)[/size][/size][size=4][size=4] [/size][/size][size=4][size=4]		    document.Onmousemove= getMouseXY;[/size][/size][size=4][size=4]		    var tempX =0[/size][/size][size=4][size=4]		    var tempY =0[/size][/size][size=4][size=4]		    functionGetMouseXY(e) {[/size][/size][size=4][size=4]		      if (IE) { // grab the x-y pos.S if browser isIE[/size][/size][size=4][size=4]					    tempX= event.ClientX + document.Body.ScrollLeft[/size][/size][size=4][size=4]					    tempY= event.ClientY + document.Body.ScrollTop[/size][/size][size=4][size=4]		      } else { // grab the x-y pos.S if browser is NS[/size][/size][size=4][size=4]					    tempX= e.PageX[/size][/size][size=4][size=4]					    tempY= e.PageY[/size][/size][size=4][size=4]		      }  [/size][/size][size=4][size=4]		      // catch possible negative values in NS4[/size][/size][size=4][size=4]		      if (tempX < 0){tempX = 0}[/size][/size][size=4][size=4]		      if (tempY < 0){tempY = 0}  [/size][/size][size=4][size=4]		      // show the position values in the form namedShow[/size][/size][size=4][size=4]		      // in the text fields named MouseX and MouseY[/size][/size][size=4][size=4]		     document.GetElementById("MouseX").Value = tempX[/size][/size][size=4][size=4]		     document.GetElementById("MouseY").Value = tempY + 13;[/size][/size][size=4][size=4]		      return true[/size][/size][size=4][size=4]		    }[/size][/size][size=4][size=4]		    </script>[/size][/size][size=4]

-reply by kishan laxkar

Edited May 24, 2012 by moderator (see edit history)