467,911 Members | 1,519 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,911 developers. It's quick & easy.

Getting Mouse coordinates in a DIV

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
  • viewed: 13599
Share:
4 Replies
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
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
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
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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by mitsura | last post: by
1 post views Thread by Dino M. Buljubasic | last post: by
7 posts views Thread by RobKinney1 | last post: by
2 posts views Thread by quickcur | last post: by
3 posts views Thread by wanwan | last post: by
1 post views Thread by Christoph | last post: by
4 posts views Thread by =?Utf-8?B?Unlhbg==?= | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.