Mouse Pointer Location in Browser

As a web developer, knowing exactly where the user's mouse pointer is inside the browser's window can be useful information sometimes. A simple scenario is when you wish to display a small tooltip to help your web visitors with filling your web forms, or showing some descriptive information for some text on your site.

In order to get the mouse cursor location we should turn to Javascript and capture the mouse movements. To do so, we need to add/attach an event listener to our document (the entire web page). Obviously, you can add/attach an event listener to a specific document element, like a form field or a <div> element.

The best way to learn how to do this is with an example. I have constructed a web page that tracks the mouse movements and displays the mouse pointer location inside the browser window and when clicked the mouse location is saved and also displayed on the screen.

Here is what I did:
First, we need to detect if our visitor is using Internet Explorer (IE) or some other web browser. This is due to the face that there is a slightly different syntax when using IE vs. FF and other browsers. We will save the detection result in a global variable so we can use it several times:

var IEDetected;
IEDetected = document.all;


Using document.all will result in NULL when using a web browser other than IE, so this is a simple way to detect IE usage.

Now we need to add/attach the even listeners for mouse movements and mouse clicks:

if (IEDetected)
{
     // IE detected - attach event listeners
     document.attachEvent("onmousemove",trackMouseLocationXY);
     document.attachEvent("onclick",saveMouseLocationXY);
}
else
{
     // Not IE – add event listeners
     document.addEventListener("mousemove",trackMouseLocationXY,false);
     document.addEventListener("click",saveMouseLocationXY,false);
}

Notice the small differences in syntax between IE and the other web browsers.
The event listener captures the mouse events, movements and clicks, and calls the relevant function, trackMouseLocationXY and saveMouseLocationXY, respectively.

Let's see what these function do:

// tracks the location of the mouse and displays it in a small tooltip next to the mouse cursor
function trackMouseLocationXY(e)
{
     // get mouse cursor location
     getMouseLocationXY(e);

     // display mouse cursor location inside div and position the div next to the cursor
     document.getElementById("MoveLocation").innerHTML = 'X: '+iMouseX+'; Y: '+iMouseY+';';
     document.getElementById("MoveLocation").style.top = iMouseY+10;
     document.getElementById("MoveLocation").style.left = iMouseX+10;
     document.getElementById("MoveLocation").style.display = "block";
}

// saves the location of the mouse and displays it in browser window
function saveMouseLocationXY(e)
{
     // get mouse cursor location
     getMouseLocationXY(e);

     // display mouse cursor location exactly where the click was made
     document.getElementById("ClickLocation").innerHTML = 'X: '+iMouseX+'; Y: '+iMouseY+';';
     document.getElementById("ClickLocation").style.top = iMouseY;
     document.getElementById("ClickLocation").style.left = iMouseX;
     document.getElementById("ClickLocation").style.display = "block";
}


As you may have noticed, both functions call a single function named getMouseLocationXY, which is actually the heart of our mechanism. Afterward, the trackMouseLocationXY function updates the relevant <div> element with the mouse pointer location and positions it next to the mouse cursor. The saveMouseLocationXY function also updated the relevant <div> element with the mouse pointer location when the click was made and positions it exactly where the click was made.

Let's take a look inside getMouseLocationXY to see how it does what it's supposed to do:

// gets the location of the mouse inside the browser window
function getMouseLocationXY(e)
{
     // check if IE
     if (IEDetected)
     {
          iMouseX = event.clientX;
          iMouseY = event.clientY;
     }
     else
     {
          iMouseX = e.pageX;
          iMouseY = e.pageY;
     }
}


Here we use the IE detection variable a second time. Again, due to different syntax between IE and the other web browsers. The function only gets the mouse pointer location in the browser window and saves the X and Y coordination to the global variables iMouseX and iMouseY, respectively.

Mixing everything together will result in the example page you see here.
Until next time...

Comments

Thank you for the tutorial.

Thank you for the tutorial. This gave me an initial start to implement drag and drop in our current project

Mouse Pointer Location

Hi
This piece of code very helpful for positioning elements on my web pages, except that the XY block does not follow the cursor and when clicked the numbers are overlapped and can't be seen. I'm fairly new to javascript so I don't know why this is happening and I don't know how to fix it.
If you have a quick fix I would like to hear about it.
Thanks anyway
Dafna

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Image CAPTCHA