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

 

[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>

 

[Stephen Chalmers]

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.

 

[Fred Oz]

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.

 

[RobB]

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.

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')
{...