Nerd Paradise
Home
About
Puzzles
Math
Programming
Origami
Japanese
MSPaint
Home > Programming > Getting the Position of the Mouse in JavaScript

Getting the Position of the Mouse in JavaScript

Dealing with mouse position in JavaScript is annoying. So as a public service, I offer this page which has JavaScript examples for finding the coordinates of the mouse for different reference points.

You're welcome.

Finding the position of the mouse relative to the screen


function findScreenCoords(mouseEvent)
{
  var xpos;
  var ypos;
  if (mouseEvent)
  {
    //FireFox
    xpos = mouseEvent.screenX;
    ypos = mouseEvent.screenY;
  }
  else
  {
    //IE
    xpos = window.event.screenX;
    ypos = window.event.screenY;
  }
  document.getElementById("screenCoords").innerHTML = xpos + ", " + ypos;
}
document.getElementById("screenBox").onmousemove = findScreenCoords;

 


Finding the position of the mouse relative to the document origin


function findDocumentCoords(mouseEvent)
{
  var xpos
  var ypos;
  if (mouseEvent)
  {
    //FireFox
    xpos = mouseEvent.pageX;
    ypos = mouseEvent.pageY;
  }
  else
  {
    //IE
    xpos = window.event.x + document.body.scrollLeft - 2;
    ypos = window.event.y + document.body.scrollTop - 2;
  }
  document.getElementById("documentCoords").innerHTML = xpos + ", " + ypos;
}

document.getElementById("documentBox").onmousemove = findDocumentCoords;

 


Finding the position of the mouse relative to the document view frame thingy



function findViewCoords(mouseEvent)
{
  var xpos;
  var ypos;
  if (mouseEvent)
  {
    //FireFox
    xpos = mouseEvent.pageX - document.body.scrollLeft;
    ypos = mouseEvent.pageY - document.body.scrollTop;
  }
  else
  {
    //IE
    xpos = window.event.x + 2;
    ypos = window.event.y + 2;
  }
  document.getElementById("viewCoords").innerHTML = xpos + ", " + ypos;
}
document.getElementById("viewBox").onmousemove = findViewCoords;

 


Finding the position of the mouse within an object


function findObjectCoords(mouseEvent)
{
  var obj = document.getElementById("objectBox");
  var obj_left = 0;
  var obj_top = 0;
  var xpos;
  var ypos;
  while (obj.offsetParent)
  {
    obj_left += obj.offsetLeft;
    obj_top += obj.offsetTop;
    obj = obj.offsetParent;
  }
  if (mouseEvent)
  {
    //FireFox
    xpos = mouseEvent.pageX;
    ypos = mouseEvent.pageY;
  }
  else
  {
    //IE
    xpos = window.event.x + document.body.scrollLeft - 2;
    ypos = window.event.y + document.body.scrollTop - 2;
  }
  xpos -= obj_left;
  ypos -= obj_top;
  document.getElementById("objectCoords").innerHTML = xpos + ", " + ypos;
}
document.getElementById("objectBox").onmousemove = findObjectCoords;

 

You are visitor #000604
Get notified about new posts by following the newfangled twitter account.
Best viewed with
© 1999 Nerd Paradise