Capturing the mousemove coordinates [javascript] [move] [mouse] [X] [coordinates] [y] [mousemove]

Source code copied from The JavaScript Source: Page Details: Mouse Coordinates [internet.com]
Tested on Firefox.

<!-- ONE STEP TO INSTALL MOUSE COORDINATES:

  1.  Copy the coding into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the BODY of your HTML document  -->

<BODY>

<form name="Show">
X <input type="text" name="MouseX" value="0" size="4"><br>
Y <input type="text" name="MouseY" value="0" size="4"><br>
</form>

<script language="JavaScript1.2">
<!-- Original:  CodeLifter.com (support@codelifter.com) -->
<!-- Web Site:  http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
  var IE = document.all?true:false;
  if (!IE) document.captureEvents(Event.MOUSEMOVE)
    document.onmousemove = getMouseXY;
    
  var tempX = 0;
  var tempY = 0;
  
  function getMouseXY(e) {
    if (IE) { // grab the x-y pos.s if browser is IE
      tempX = event.clientX + document.body.scrollLeft;
      tempY = event.clientY + document.body.scrollTop;
    }
    else {  // grab the x-y pos.s if browser is NS
      tempX = e.pageX;
      tempY = e.pageY;
    }  
    
    if (tempX < 0){tempX = 0;}
    if (tempY < 0){tempY = 0;}  
    
    document.Show.MouseX.value = tempX;
    document.Show.MouseY.value = tempY;
    
    return true;
  }
//  End -->

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  1.33 KB -->

*update 10:55am 21-Mar-08*
I have decided to use the following code instead as it looks a bit cleaner, and more up-to-date.
Tested on Firefox 2 and IE 6.

document.onmousemove = mouseMove;

function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

Reference: How to Drag and Drop in JavaScript [webreference.com]

Never been to DZone Snippets before?

Capturing the mousemove coordinates (See related posts)

Popular @ dzone.com

Related Posts