Track mouse speed with JS

dandoen picture dandoen · Jun 20, 2011 · Viewed 25.8k times · Source

What's the best way to track the mouse speed with plain JS/JQuery? I'd like to track how fast a user moves the mouse in all directions (up/down/left/right).

Answer

Jonathan picture Jonathan · Jun 20, 2011

Sparklines has a nifty example of tracking mouse movement and graphing it. Their code is available in the source of their site starting at line 315.

Simple and effective.

Here is the code:

 var mrefreshinterval = 500; // update display every 500ms
 var lastmousex=-1; 
 var lastmousey=-1;
 var lastmousetime;
 var mousetravel = 0;
 $('html').mousemove(function(e) {
     var mousex = e.pageX;
     var mousey = e.pageY;
     if (lastmousex > -1)
         mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
     lastmousex = mousex;
     lastmousey = mousey;
 });