Web Analytics Made Easy -
StatCounter How to get the mouse-click location (x,y) - CodingForum

Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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>

    Comment


    • #3
      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
      -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

      Comment


      • #4
        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.

        Comment


        • #5
          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
          -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

          Comment

          Working...
          X