Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

Tracking Mouse Position and Window Size via JS

Posted by bcmoney on April 7, 2009 in HTML, JavaScript with 2 Comments


No Gravatar
An example of mouse pointer trails.

Image via Wikipedia

The following is a useful little script I’ve found myself digging up repeatedly these days while doing some early UI testing on my teacher-student Medical E-Learning portal project. Tracking a user’s mouse position over time is mostly fancy fluff, but in some cases it could generate useful data, which could be utilized to fill analytics charts to supplement server logs and other statistics, ala OWA, for performing in-depth Web Analytics on how users interact with your system.

The code for tracking your cursor is surprisingly easy, with a quick check for support of the window.event, and some alternatives for older or more basic browsers like IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Screen-resize Updater + Mouse Position Tracker [widget]	
	<link type="text/css" rel="stylesheet" href="style.css" media="screen" />	
</head>
<body>
	<div id="page">
		<div id="header">
			<h1>WARNING: Your Cursor Movement now being tracked!</h1>
		</div>
		<div id="menu">
			Window width: <div id="w"></div>
			Window height: <div id="h"></div>
			Window X-position: <div id="x"></div>
			Window Y-position: <div id="y"></div>
		</div>
		<div id="content">
			<img src="" />
		</div>
		<div id="footer">
			CC 3.0: BY-SA
		</div>
	</div>
		<script type="text/javascript">
	window.onload = (function(e) {
		if (window.Event) {
			document.captureEvents(Event.MOUSEMOVE);
		}
		document.onmousemove = (function(e) { 
				document.getElementById("x").innerHTML = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
				document.getElementById("y").innerHTML = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
		});
	});
	window.onresize = function(resize) {
		document.getElementById("w").innerHTML = document.documentElement.clientWidth;
		document.getElementById("h").innerHTML = document.documentElement.clientHeight;	
	}
	</script>
</body>
</html>


– or –

As you can see, the code to accomplish this is not too complicated, and we don’t even need to rely on an onload attribute on the <body> or anything silly like that to get it working.

The only parts worth explaining in more detail are the capture of the mouse movement event:

document.captureEvents(Event.MOUSEMOVE);

As well as the X & Y cursor position:

//if window.Event is supported, use a good browser's native X page position, otherwise do some IE hacking to estimate the position relative to left edge of browser (body opening)
(window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); 

//if window.Event is supported, use a good browser's native Y page position, otherwise do some IE hacking to estimate the position relative to top edge of browser window (body opening)
document.getElementById("y").innerHTML = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

That’s about all there is to it, enjoy! But remember, with great power comes great responsibility; use the tracking features wisely and always keep people’s personal security and privacy above short-term profit motives or temptation towards laziness, users will thank you in the long run.