Question

How can I find out the mouse position in a browser?

I know e.pageX , e.pageY, but I want to know if the mouse goes up or down and how much it goes (at every moment)? But I couldn’t find a way to store last (pageX, pageY) to compare it with new (pageX, pageY)!

What I tried to do:

I have a picture that follows the mouse. I want to know how much the mouse goes up or down so I can change the picture size (if the mouse goes up 5 pixels, my picture width will be changed by +10 pixels and if mouse goes down 5 pixels my picture width will be -10 pixels).

Answer 1

You can use the mousemove event. to track the mouse coordinates as it moves.

However you should be aware that the mousemove event will eat up a lot of process time, because the event will be triggered for every pixel the cursor moves, so be careful with it.

It is a good idea to trigger a very simple and fast function in such events.

I hope that is what you are looking for

Example :

element.onmousemove = function () {
   // do something simple
};

UPDATE:

for tracking, here is a sample function

// initialize the variables outside the function to have them retain their value

var x=0;
var y=0;

function trackMouse(e) {
   var evt = e || window.event;
   if (evt.clientX) { // grab the x-y pos if browser is IE
     var tempX = evt.clientX + document.body.scrollLeft;
     var tempY = evt.clientY + document.body.scrollTop;
   }
   else {  // grab the x-y pos.s if browser is else
     var tempX = evt.pageX;
     var tempY = evt.pageY;
   }  
   if (x > tempX){
      // the mouse is going left
   }else {
      // mouse is going right
   }
   x = tempX; // set new value
   if (y > tempY){
      // the mouse is going down
   }else {
      // mouse is going up
   }
   y = tempY;
}

this will help you detect in which direction the mouse is moving