How Can I Determine Start And Stop Points For Mouse Cursor?

Let's say the user starts to move mouse and stop at somewhere on the browser. How can I determine start and stop point with Javascript/Jquery ? Start point is easy, I can get it wi

Solution 1:

using a combination of setTimeout and clearTimeout. If the user doesn't move for x amount of seconds then it means that he stopped.

Here I wrote you an example:

<scripttype="text/javascript">var lastMove = 0;
    var lastTimeout = 0;
    jQuery(document).ready(function () {
        $(document).mousemove(function (e) {
            $('#status').html(e.pageX + ', ' + e.pageY);
            var currentMove = (newDate()).getTime();
            if (lastTimeout != 0) {
                clearTimeout(lastTimeout);
            }
            if (currentMove - lastMove > 1500)
            { alert('started'); }
            lastMove = currentMove;
            lastTimeout = setTimeout(function () {
                var currentMove = (newDate()).getTime();
                if (currentMove - lastMove > 1500)
                { alert('stopped'); }
            }, 1510);
        });
    })
</script><h2id="status">
0, 0
</h2>

Solution 2:

The start location is the location when the mousemove event is first fired. It will keep firing until the mouse stops moving. So, if you add a timer (setTimeout/clearTimeout) to your mousemove event function, you can say the mouse has stopped moving after a certain amount of time has passed without the mousemove function being called.