# Checking user mouse movement

I am trying to update my server to let it know that the user had some activity in the past 15 minutes. In order to do that, I made this implementation:

var page = {

updated: false,

change_state: function(e)   {
var self = this;
if(!this.updated){
debugConsole.log('Moved mouse');
setTimeout(function(){
self.updated = false;
},  //                10000); //10 seconds
120000); //2 minutes
this.updated = true;
$.ajax({ url: 'comet/update.php', success: function(data){ debugConsole.log('Moved mouse at: ' + data); } }) } }, mouse_click: function(e) { this.updated = false; } }$("*").live('mousemove',function(e){
e.stopPropagation();
page.change_state(e); });

$("*").live('click',function(e){ page.mouse_click(e); });  I made it so that it only takes effect after 2 minutes from the last action, unless the last action was a click. Is this the best way of doing it? ## 3 Answers I wouldn't recommend using$("*").live, you only need the events on the document body, so long as they are allowed to properly bubble.

• How do i make the properly bubble? this page is live so the dom is changing all of the time – Neal May 6 '11 at 18:40
• @Neal — Events bubble unless they are specifically prevented from doing so. You should be able to use $(document.body).bind instead of $("*").live (and you will see much better performance if you do). – Ben Blank May 6 '11 at 18:55
• @BenBlank, how do i use document.bind? – Neal May 6 '11 at 18:58

I wouldn't alert the server every time the mouse moves. Instead I'd just make a note of the time. For letting the server know I'd set up an interval that tells the server if the user has been active recently.

var page = {
lastUpdated: (new Date).getTime(),
mouse_move: function(e)   {
this.lastUpdated = (new Date).getTime();
},
mouse_click: function(e)    {
this.lastUpdated = (new Date).getTime();
},
checkForLife: function () {
if( page.lastUpdated + 15 * 60 * 1000 > (new Date).getTime() ) {
$.post('comet/update.php',{status: 'alive'}); } else {$.post('comet/update.php',{status: 'dead'});
}
}
}
$("body").mousemove( page.mouse_move );$("body").click( page.mouse_click );
setInterval( page.checkForLife, 2 * 60 * 1000 );

• how is this different than what i have? – Neal May 8 '11 at 5:11
• 1: The event binding are only on the body. 2: The server interaction is handled in a separate setInterval, not an event. – generalhenry May 8 '11 at 7:34
• yes but it happens every x seconds as opposed to hen they do the action, why would i want that? – Neal May 8 '11 at 18:58
• 1: the posting loop also lets the server know the user is idle. 2: the posting loop is evenly rate limited to balance server load. – generalhenry May 8 '11 at 19:11
• yes, but i dont want to send a message if no action was taken, this app may be for many users, and i dont want a high server hit – Neal May 8 '11 at 23:57

The .live() has been deprecated since jQuery 1.7 we use the .on() method now:

$("*").on('mousemove',function(e){ e.stopPropagation(); page.change_state(e); });$("*").on('click',function(e){
page.mouse_click(e);
});


Also I wouldn't recommend attaching an event handler to that global element.