Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to get the mouse-click location (x,y)

    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?

  • #2
    Regular Coder
    Join Date
    May 2005
    Posts
    142
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool clientX and clientY properties of the Event object.

    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:
    Code:
    <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>

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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:
    Code:
    <!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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Regular Coder
    Join Date
    May 2005
    Posts
    142
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs down

    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.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by VortexCortex View Post
    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
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •