Mouse coordinates in div

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Grim...
DevNet Resident
Posts: 1445
Joined: Tue May 18, 2004 5:32 am
Location: London, UK

Mouse coordinates in div

Post by Grim... »

I can get the mouse coordinates of the cursor position on the screen like this:

Code: Select all

<script type="text/javascript">
function show_coords(event)
{
	x=event.clientX
	y=event.clientY
	alert("X coords: " + x + ", Y coords: " + y)
}
</script>

<body onmousedown="show_coords(event)">
But I want to know where inside a div block the user is clicking. The top left of the div block will be 0, 0 and scrolling the page won't make any difference.

Any ideas?
Last edited by Grim... on Wed Feb 15, 2006 4:53 am, edited 2 times in total.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

With absolute positioning it's trivial:

Code: Select all

<script type="text/javascript">
<!-- Hidey hidey

function updatePosition(e)
{
	if (navigator.appName == 'Netscape')
	{
		xcurs = e.pageX;
		ycurs = e.pageY;
	}
	else
	{
		//IE version
		xcurs = event.clientX;
		ycurs = event.clientY;
	}
	showXY(xcurs, ycurs);
}

function showXY(x, y)
{
	el = document.getElementById('foo');
	
	document.getElementById('x').value = x - parseInt(el.style.left);
	document.getElementById('y').value = y - parseInt(el.style.top);
}


// -->
</script>
<body>
<br />
<br />
<div id="foo" style="position: absolute; top: 120px; left: 27px; width: 300px; height: 100px; border: 1px solid #000000;">
 Test
</div>

<input type="text" name="x" id="x" /> <input type="text" name="y" id="y" />

<script type="text/javascript">
<!-- Hidey hidey ;)

if (document.captureEvents) document.captureEvents(Event.MOUSEMOVE);
document.getElementById('foo').onmousemove = updatePosition;

// -->
</script>
But without setiing the position explicitly I'm not sure it's possible. I seem to remember something about determing the page offset of a node but I can't find any documentation in it so I may be wrong.
Grim...
DevNet Resident
Posts: 1445
Joined: Tue May 18, 2004 5:32 am
Location: London, UK

Post by Grim... »

But wouldn't the 'Y' ref change when someone scrolled down and clicked?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Not with that script I just posted no. The cursor positions are based upon the screen (well, in reality it's just the bit of screen that the browser window occupies).
Grim...
DevNet Resident
Posts: 1445
Joined: Tue May 18, 2004 5:32 am
Location: London, UK

Post by Grim... »

Wikkid!

Cheers :)
Grim...
DevNet Resident
Posts: 1445
Joined: Tue May 18, 2004 5:32 am
Location: London, UK

Post by Grim... »

No, IE still counts wrong if you scroll the page - try making that div huge :(
Grim...
DevNet Resident
Posts: 1445
Joined: Tue May 18, 2004 5:32 am
Location: London, UK

Post by Grim... »

:cry:

Anyone?
Post Reply