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.
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:
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:
// IE detected - attach event listeners
// Not IE – add event listeners
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
// get mouse cursor location
// 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
// get mouse cursor location
// 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
// check if IE
iMouseX = event.clientX;
iMouseY = event.clientY;
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...