How does the triggering of mousemove work in Javascript?

Question

I have an object that prints the mouse's x and y positions on every mousemove.

It's something like this:

$('#canvas').mousemove(function(e){
    $('#output').prepend(e.pageX + ',' + e.pageY);
});

I've noticed that when you move over the object really fast it only prints out a few positions.

I'm not exactly unhappy that it does that (because it would be quite exhaustive to have it do something for all the hundreds of pixels you've crossed) but I am wondering how this works.

Is the mousemove event limited to a certain amount of triggers per second or what?

(Btw: this was tested on Chromium in Ubuntu Linux)

I think it really depends on the browser and computer being used; more memory/faster cpu probably === more iterations per `x` time. So with that being as it is, I wouldn't heavily depend on `mousemove`. — Shaz, May 11 '11 at 18:25

score 2 · Accepted Answer · edited May 23 '17 at 11:55

2

"Mice only report their position to the operating system n times per second, and I think n is usually less than 100"

edited May 23 '17 at 11:55

Community

1
1

answered May 11 '11 at 18:58

Mike Blandford

3,952
4
29
32

score 1 · Answer 2 · edited May 23 '17 at 12:26

1

You may want to look at this, as this may be browser dependent,

http://javascript.info/tutorial/mouse-events#mousemove-and-mouseover-frequency, but, if you look at this question, there is a suggestion on how to get better response.

How to set mousemove update speed?

edited May 23 '17 at 12:26

Community

1
1

answered May 11 '11 at 19:04

James Black

41,583
10
86
166

Jishnu A P · Answer 3 · 2011-05-11T18:59:21.423

i think it's synchronous. It's doesn't get triggered for every pixel in which you move your mouse, which means that the events are not queued up .

Say if you have some some code like this.

$('#canvas').mousemove(function(e){
//Some code which takes seconds to execute 
//All subsequent events won't be dispatched while this event handler is executing. 
});

Say if you move mouse while the mouse move event handlers execute. The mousemove handler won't be triggered.

Here is a example for handler which will take seconds to execute. --> http://jsfiddle.net/78Hf3/1/

And one that take only few time --> http://jsfiddle.net/78Hf3/2/

How does the triggering of mousemove work in Javascript?

3 Answers3