Home About Puzzles Math Programming Origami Japanese MSPaint

Don't worry, I'm not selling anything. Just giving a shoutout to one of my open-source side projects:

I created a programming language for beginners and am looking for people to test it out. If you have a spare moment (particularly if you haven't programmed before) and you're interested in making 2D games, please check it out.

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 #