Checking if mouse is moving or not

**shachi** · 06-30-2007, 07:02 PM

Hello everyone,

Does anyone know of a technique which allows you to check if the mouse is moving or not? What I basically need to do is to check if the mouse is moving or not and send an ajax request back to the server or execute a function(as soon as the mouse is not moving). I'd like to do this because sending ajax requests onmousemove would be extremely overloading.

Any help would be greatly appreciated.

Thanking you for your time and patience.

**Twey** · 06-30-2007, 07:55 PM

Code:

document.onmousemove = (function() {
  var onmousestop = function() {
    /* do stuff */
  }, thread;

  return function() {
    clearTimeout(thread);
    thread = setTimeout(onmousestop, 500);
  };
})();

It'll execute the supplied code if the mouse is still for half a second.

**shachi** · 07-02-2007, 06:19 AM

Thanks a lot Twey!! It works.

**shachi** · 07-09-2007, 04:36 PM

Sorry to bring up an old post but can you tell me how can I capture events? I tried:

Code:

document.onmousemove = (function(e) {
  var onmousestop = function() {
    /* do stuff */
  }, thread;

console.log(e.clientX)

  return function() {
    clearTimeout(thread);
    thread = setTimeout(onmousestop, 500);
  };
})();

But it says that e has no properties. Any clue? Thanks again.

**mwinter** · 07-09-2007, 06:10 PM

Originally Posted by shachi

Sorry to bring up an old post but can you tell me how can I capture events? I tried:

Code:

document.onmousemove = (function(e) {
  var onmousestop = function() {
    /* do stuff */
  }, thread;

console.log(e.clientX)

  return function() {
    clearTimeout(thread);
    thread = setTimeout(onmousestop, 500);
  };
})();

But it says that e has no properties.

Quite. You need to look more carefully at the code Twey posted: there are three functions involved.

The outer function is not assigned to the onmousemove property. If you look at the end, you should see that this function is actually called immediately. It is the function expression following the return statement that is used; the return value of the outer function is assigned as a listener.

Code:

var global = this;
document.onmousemove = function () {
    var task;
    return function (event) {
        if (task) clearTimeout(task);
        if ((event = event || global.event)) {
            console.log(event.clientX);
            task = setTimeout(mousestop, 500);
        }
    };

    function mousestop() {
        /* Do stuff when the mouse stops moving. This function will be called as soon as the mouse
         * stops moving within the viewport for 500ms or more. Note that movement outside the
         * viewport (in other applications, across the desktop, or amongst the browser chrome) will
         * not be considered; it cannot be tracked.
         */
    }
}();

Hope that helps

**jscheuer1** · 07-09-2007, 06:19 PM

That bit of code is so complex with anonymous functions nested within an anonymous function. It may not be able to be done at (the event may not be able to penetrate to) the level where you have:

Code:

console.log(e.clientX)

You could perhaps use the addEventListener and attachEvent methods to do the logging as a separate function. In any case, it isn't clear what event you want to capture and you would need an alternate route to capture it in IE, which doesn't do the 'e' thing. It looks like, the way you have it nested there, you want to capture the mouse moving position, not the mouse stopped position, but logically I would suspect it is the other way around.

**jscheuer1** · 07-09-2007, 07:12 PM

This seems to work out:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function logx(v){
document.getElementById('lx').value=v;
}

function mymove(e){
clearTimeout(mymove.thread);
var e=e? e : window.event, x=e.clientX,
mymousestop=function(){
logx(x);
};
mymove.thread=setTimeout(mymousestop, 500);
}

if ( typeof window.addEventListener != "undefined" )
    document.addEventListener( "mousemove", mymove, false );
else if ( typeof window.attachEvent != "undefined" )
    document.attachEvent( "onmousemove", mymove );

</script>
</head>
<body>
<input type="text" id="lx">
</body>
</html>

**jscheuer1** · 07-09-2007, 07:26 PM

Even adding the event in the 'normal way' works:

Code:

function mymove(e){
clearTimeout(mymove.thread);
var e=e? e : window.event, x=e.clientX,
mymousestop=function(){
logx(x);
};
mymove.thread=setTimeout(mymousestop, 500);
}

document.onmousemove=mymove;

**Twey** · 07-09-2007, 07:29 PM

Or simply:

Code:

document.onmousemove = (function() {
  var onmousestop = function() {
    /* do stuff */
  }, thread;

  return function() {
    clearTimeout(thread);
    thread = setTimeout(onmousestop, 500);
    console.log((arguments[0] || event).clientX);
  };
})();

**jscheuer1** · 07-09-2007, 09:02 PM

Twey, your version is logging the moving mouse position, not the position when and only when it stops, as mine does. However, I'm still not sure which shachi is after.

Thread: Checking if mouse is moving or not

Thread Tools

Search Thread

Checking if mouse is moving or not

Bookmarks

Bookmarks

Posting Permissions