...

View Full Version : How to get the mouse-click location (x,y)



LoveBeingADad
10-05-2006, 12:09 AM
I have some charts that create a pop-up window to show more detailed information. I use a javascript to create the pop-up and to sets its size.

I would like to position the pop-up near where the user clicked with their mouse. How can I get the x,y location of the mouse at the point of it's being clicked?

VortexCortex
10-05-2006, 06:26 AM
access the clientX and clientY properties of the event object.
In IE: event.clientX or event.clientY.
In NS: the event object is passed to your function via argument list.

I've composed an example for you:


<html>
<head><title>Mouse Coordinates</title>
<script type="text/javascript">
function showMouseXY(e){
if (typeof(e)=="undefined")e=event;
var coord = "("+e.clientX+", "+e.clientY+")";
if(typeof(txtCoord)!="undefined"){
txtCoord.removeChild(txtCoord.firstChild);
txtCoord.appendChild(document.createTextNode(coord));
}
window.top.status = "Mouse Coordinates: "+coord;
}

if (typeof(document.attachEvent)!="undefined"){
document.attachEvent("onmousemove",showMouseXY);
} else if (typeof(document.addEventListener)!="undefined") {
document.addEventListener("mousemove",showMouseXY,true);
}

</script>
</head>
<body>
<p>Your mouse coordinates are: <span id="mxy">unknown. Move the mouse please.</span><br>
Also look at the status bar...
</p>
<script type="text/javascript">
var txtCoord = document.getElementById("mxy");
</script>
</body>
</html>

Kor
10-05-2006, 07:40 AM
LoveBeingADad needs onclick, not onmousemove. And you don't need to attach the event in that intricate crossbrowser way. And you should consider the possible scroll of the page as well.

Ex:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var posx;var posy;
function getMouse(e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//IE:Moz
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
posx=ev.clientX+document.body.scrollLeft;
posy=ev.clientY+document.body.scrollTop;
}
else{return false}//old browsers
document.getElementById('myspan').firstChild.data='X='+posx+' Y='+posy;
}
document.onclick=getMouse
</script>
</head>
<body>
<span id="myspan">&nbsp;</span>
</body>
</html>

VortexCortex
10-05-2006, 08:04 AM
Not to mention that he probably doesn't need the coordinates displayed at all.

Or the fact that this same topic has been covered extensively in the archives if one were to search....

Lazy questions get lazy replies. I just coppied and pasted an sample out of my example library.

Kor
10-05-2006, 10:56 AM
Not to mention that he probably doesn't need the coordinates displayed at all.

Or the fact that this same topic has been covered extensively in the archives if one were to search....

Lazy questions get lazy replies. I just coppied and pasted an sample out of my example library.

My example is only an example. Of course he does not need to display the coordinates, I inserted that code line only to see that the code works. He will deleted in his page, nevertheles



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum