Getting position of mouse within a specified element

[Weston C]

Here's something I'm working on: for a click on a given
element, I want to be able capture the x/y coordinates of the mouse --
that is, the mouse coordinates relative to the top left corner of said
element.

So far, here's what I've got:

http://weston.canncentral.org/misc/webgallery/Haven/pie.html
(Code for the function given in this post below).

It seems to work in Gecko-based browsers, and IE/Win.

It breaks badly in Safari, grabbing what is apparently instead the
viewport position of the mouse. Also, on IE/Mac, it breaks if there's
any scrolling done on the page (try resizing the window so that it's
smaller than the sample image, then scrolling down, and then clicking).

Any ideas what I can do to make it work better for the Mac
browsers? Also, any other platforms which you observe it
breaking under?

Thanks,

Weston

function getClickCoordsWithinTarget(event)
{
var coords = { x: 0, y: 0};

if(!event) // then we're in a non-DOM (pro'ly IE) browser
{
event = window.event;
coords.x = event.offsetX;
coords.y = event.offsetY;
}
else // we assume DOM modeled javascript
{
var Element = event.target ;
var CalculatedTotalOffsetLeft = 0;
var CalculatedTotalOffsetTop = 0 ;

while (Element.offsetParent)
{
CalculatedTotalOffsetLeft += Element.offsetLeft;
CalculatedTotalOffsetTop += Element.offsetTop;
Element = Element.offsetParent ;
}

coords.x = event.pageX - CalculatedTotalOffsetLeft;
coords.y = event.pageY - CalculatedTotalOffsetTop;
}

return coords;
}


~==~
http://weston.canncentral.org/
Taking Pictures During Dreams
weston8[at]cann8central.org
(remove eights to mail me)

 

[john henry bonham]

try event.x / event.y instead of event.offsetX / event.offsetY