Getting Mouse coordinates in a DIV

Jonne

Hi,
I haven't found anything like this anywhere with Google, so I'm posting
it here, hoping one of you people knows how to do something like this.
I'm trying to get the mouse coordinates in a div, as opposed to relative
to the screen.

_______________________________
| * |
|_______________________________|

Say this DIV is 100px wide, and the mouse is located at 60px from the
left side of the DIV, how can I get 60px as a value from that? It should
work in Firefox and IE (and preferably Opera, Konqueror, Safari, etc too
;) )

Is the only way to get mouse coordinates this:

function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
?

Or can I use DOM to grab it through getElementByID ?

thanks in advance
Jonne

Jul 23 '05 #1

Fred Oz

Jonne wrote:
[...]

Is the only way to get mouse coordinates this:

function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
?

You should make your event capture routine more cross-browser and
swap feature detection for browser detection:

function getMouseXY(e) {
var e = e || window.event;

// grab the x-y pos.s if browser supports clientX/Y
if ( e.clientX && document.body.scrollLeft
&& document.body.scrollTop ) {
tempX = e.clientX + document.body.scrollLeft;
tempY = e.clientY + document.body.scrollTop;

// Otherwise, try pageX/Y
} else if (e.pageX) {
...
}

I imagine you also need to get the postion of the element too,
for that document.getElementById may be useful to get a reference
to the div.

Have a read here for a pointer to the issues with trying to get
the cursor position:

<URL:http://www.quirksmode.org/js/events_properties.html>
--
Fred

Jul 23 '05 #2

Stephen Chalmers

Fred Oz <oz****@iinet.net.auau> wrote in message
news:42***********************@per-qv1-newsreader-01.iinet.net.au...

if ( e.clientX && document.body.scrollLeft
&& document.body.scrollTop )

These properties are numeric, so even if they are all defined, the test
evaluates false unless they are all non-zero.

--
S.C.

Jul 23 '05 #3

Fred Oz

Stephen Chalmers wrote:

Fred Oz <oz****@iinet.net.auau> wrote in message
news:42***********************@per-qv1-newsreader-01.iinet.net.au...

if ( e.clientX && document.body.scrollLeft
&& document.body.scrollTop )

These properties are numeric, so even if they are all defined, the test
evaluates false unless they are all non-zero.

Yes, that is so. Detection of such features is difficult, as not
only are they browser dependent, but also may be unavailable
based on doctype:

<URL:http://www.quirksmode.org/viewport/compatibility.html>

I guess testing for them needs to be separated from the clientX/Y
test and put inside try/catch: if they return zero, then the
scroll offset it zero. If they error, then the offset is unknown
and the OP must take a guess at what to do.
--
Fred

Jul 23 '05 #4

RobB

Fred Oz wrote:

Stephen Chalmers wrote:

Fred Oz <oz****@iinet.net.auau> wrote in message
news:42***********************@per-qv1-newsreader-01.iinet.net.au...

if ( e.clientX && document.body.scrollLeft
&& document.body.scrollTop )

These properties are numeric, so even if they are all defined, the test evaluates false unless they are all non-zero.

Yes, that is so. Detection of such features is difficult, as not
only are they browser dependent, but also may be unavailable
based on doctype:

<URL:http://www.quirksmode.org/viewport/compatibility.html>

I guess testing for them needs to be separated from the clientX/Y
test and put inside try/catch: if they return zero, then the
scroll offset it zero. If they error, then the offset is unknown
and the OP must take a guess at what to do.
--
Fred

Why not...

function getMouseXY(e)
{
e = e || window.event;
if (e)
{
// grab the x-y pos.s if browser supports clientX/Y
if (document.body
&& typeof document.body.scrollLeft != 'undefined'
&& typeof e.clientX != 'undefined')
{
var tempX = e.clientX + document.body.scrollLeft;
var tempY = e.clientY + document.body.scrollTop;
}
// Otherwise, try pageX/Y
else if (typeof e.pageX != 'undefined')
{...

Jul 23 '05 #5