onmouseclick get click coordinates

**city_coder** · 04-21-2008, 12:39 PM

hi guys, right i know you will know this one.

I need to get the mouse coordinates onclick of a link. the link doesnt go anywhere, it opens up a div. but i need to make the divs position dynamic depending on where abouts the click was.

il give an example

<a href="#" onclick="ajaxFunction(this.id)" id="dog">dog</a>
<a href="#" onclick="ajaxFunction(this.id)" id="cat">cat</a>
<a href="#" onclick="ajaxFunction(this.id)" id="mouse">mouse</a>

when one of these links gets pressed it displays a div that gets filled with results based on the id passed to the ajax.
This div needs to be positioned based on the click as the user may have the history window open and so this may force it else where as it positioned absolutely.

so reiterate, i need to get the mouse coordinates based on onclick and then i need to edit the divs position based on these coordinates

any help please, im at a loss with javascript really

**Nile** · 04-21-2008, 01:42 PM

You can try doing something with:

Code:

event.clientX

And

Code:

event.clientY

**city_coder** · 04-21-2008, 01:50 PM

Ok well i gathered that bit from searching. I just dont know how to get the coordinates from the click thats all. thats the bit i need.

**molendijk** · 04-21-2008, 03:00 PM

Here's something old. Stll working fine:

Code:

<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: JS-Examples - http://www.js-examples.com/
-->

<script type=text/javascript>
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.CLICK);
document.onclick = getMousePosition;
function getMousePosition(e) {
  var _x;
  var _y;
  if (!isIE) {
    _x = e.pageX;
    _y = e.pageY;
  }
  if (isIE) {
    _x = event.clientX + document.body.scrollLeft;
    _y = event.clientY + document.body.scrollTop;
  }

posX=_x;
posY=_y;

  return true;
}

</script>

</head>
<body onclick=alert("X-position:&nbsp;"+posX+";&nbsp;Y-position:&nbsp;"+posY+".")>

Click to track the mouse position.

</body>
</html>

Arie Molendijk.

**city_coder** · 04-21-2008, 03:48 PM

You my friend are a good man!

just out of curiosity, if you put that into an a onclick so:

<a href="#" onclick=alert("X-position: "+posX+"; Y-position: "+posY+".")>Click to track the mouse position.</a>

it doesnt work for the first mouse click on the page, it will work every time after that though. just wondered why, im not that bothered like.

cheers all the same

**molendijk** · 04-21-2008, 04:52 PM

Originally Posted by city_coder

it doesnt work for the first mouse click on the page, it will work every time after that though. just wondered why, im not that bothered like.

Sorry, I made a mistake. Replace your page with this one:

Code:

<html>
<head>

<script type=text/javascript>
var isIE = document.all?true:false;
document.onmousemove = getMousePosition;
function getMousePosition(e) {
  var _x;
  var _y;
  if (!isIE) {
    _x = e.pageX;
    _y = e.pageY;
  }
  if (isIE) {
    _x = event.clientX + document.body.scrollLeft;
    _y = event.clientY + document.body.scrollTop;
  }

posX=_x;
posY=_y;

  return true;
}

</script>

</head>
<body onclick=alert("X-position:&nbsp;"+posX+";&nbsp;Y-position:&nbsp;"+posY+".")>

Click to track the mouse position.

</body>
</html>

That will solve the problem.
----
Arie M.

**Nile** · 04-21-2008, 06:14 PM

Can you explain to me what the e variable does? It doesn't look like your using it.

**molendijk** · 04-21-2008, 06:32 PM

Originally Posted by Nile

Can you explain to me what the e variable does? It doesn't look like your using it.

You don't need it for IE, but you do need it for non-IE.

IE:
We have event.clientX + document.body.scrollLeft and event.clientY + document.body.scrollTop, which does the mousetracking by itself.

Non-IE:
We have somevariable.pageX and somevariable.pageY. The variable only gets its concrete value of we do a mouse-event. For that reason, we must have the variable in our function, here: getMousePosition(somevariable). I used 'e' for the variable, but I could have equally well have used 'f', in which case we should have:
function getMousePosition(f){
.....
.....
_x = f.pageX;
_y = f.pageY;
.....
.....

etc.

That's it.
-----
Arie M.