Detecting when the mouse is not moving

Question

I am able to find the cursor position. But I need to find out if the mouse is stable. If the mouse wasn't moved for more than 1 minute, then we have to alert the user.

How its possible, are there any special events for this? (Only for IE in javascript)

Solution 1

Set a timeout when the mouse is moved one minute into the future, and if the mouse is moved, clear the timeout:

var timeout;
document.onmousemove = function(){
  clearTimeout(timeout);
  timeout = setTimeout(function(){alert("move your mouse");}, 60000);
}

Solution 2

Here's a one-and-done function that can check any element for movement:

function mouse (element, delay, callback) {

   // Counter Object
   element.ms = {};

   // Counter Value
   element.ms.x = 0;

   // Counter Function
   element.ms.y = function () {

      // Callback Trigger
      if ((++element.ms.x) == delay) element.ms.callback(element, element.ms);
   };

   // Counter Callback
   element.ms.callback = callback;

   // Function Toggle
   element.ms.toggle = function (state) {

      // Stop Loop
      if ([0, "off"][state]) clearInterval(element.ms.z);

      // Create Loop
      if ([1, "on"][state]) element.ms.z = setInterval(element.ms.y, 1);
   };

   // Function Disable
   element.ms.remove = function () {

      // Delete Counter Object
      element.ms = null; return delete element.ms;
   };

   // Function Trigger
   element.onmousemove = function () {

      // Reset Counter Value
      element.ms.x = -1;
   };

   // Return
   return element.ms;
};

Usage: mouse(element, delay, callback)

Examples: Make a video player hide the mouse after 5 seconds when idle and fullscreen

let x = mouse(video, 5000, function (a) {
   if (document.webkitIsFullScreen) video.style.cursor = "none";
});

x.toggle(1); addEventListener("mousemove", function () {
   video.style.cursor = "auto";
});

Chat Room AFK (45 Seconds) (assuming you have a chat box and a send message function):

let x = mouse(chatBox, (45e3), function (a) {
   chatBox.send({ text: chatBox.username + " is AFK.", italic: true });
});

x.toggle(1); x.addEventListener("mousemove", function () {
  chatBox.send({ text: chatBox.username + " is no longer AFK", italic: true });
});

Solution 3

Use a timer that resets its value on mousemove event. If timer reaches 1 minute --> Do something.

More info on timer here http://www.w3schools.com/js/js_timing.asp
And more info on catchin mouse events here http://www.quirksmode.org/js/events_mouse.html

Solution 4

Yes, you have a onmousemove event in Javascript, so to achieve what you need you just have to do code something like this:

startTimer();
element.onmousemove = stopTimer(); //this stops and resets the timer

You can use it on the document body tag for instance.

UPDATE: @Marius has achieved a better example than this one.

View more solutions