bind mousemove() with click event

Question

I would like to re-attach mousemove() after a click event is fired. I am using jquery off/on to handle this functionality. The mousemove is turned off when a html element is displayed. The on is invoked when the user clicks a button. The off() works as expected, but I am not successfully reattaching the event when the button is clicked.

$(document).ready(function() {
  $(this).mousemove(function(e) {
    console.log("The mouse moved");
  });  
});

function buttonEvents(){
  $('.reset').click(function() {
    modal.hide();
    $(document).on('mousemove');
    console.log('The mouse moved.');
  });
  $('.close').click(function() {
    modal.hide();  
  });

  if($('.photoCnt').css('display') === 'block'){
    $(document).off('mousemove');
  }
}

I tired wrapping the mousemove() into a function and calling it, but it is not working.

function userActivity(){
  $(this).mousemove(function(e) {
    console.log("The mouse moved");
  });

  function buttonEvents(){
    $('.reset').click(function() {
      modal.hide();
      $(document).on('mousemove', userActivity);
      console.log('The mouse moved.');
    });
    $('.close').click(function() {
      modal.hide();  
    });

    if($('.photoCnt').css('display') === 'block'){
      $(document).off('mousemove', userActivity);
    }
  }
}

What is the correct way to accomplish this functionality?

Answer 1

If you find something isn't working, my advice is to separate your desired actions into smaller functions. You can then test those functions individually and then combine them together to achieve your desired result.

For example, I would create 3 functions, addMouseMoveListener() , removeMouseMoveListener() , and onMouseMoveHandler(ev) .

function addMouseMoveListener() {
    $(document).on('mousemove', onMouseMoveHandler);
    console.log("addMouseMoveListener() finished");
}

function removeMouseMoveListener() {
    $(document).off('mousemove', onMouseMoveHandler);
    console.log("removeMouseMoveListener() finished");
}

function onMouseMoveHandler(ev) {
    console.log("Mouse moved!", ev);
}

After testing each of these individual functions, you can organize them in your code to be called at the appropriate times.

$(document).ready(function() {
    // initialize your button event handlers
    // turn on/off mousemove event handlers when desired

    $('.reset').click(function() {
        modal.hide();
        addMouseMoveListener();
    });
    $('.close').click(function() {
        modal.hide();
        removeMouseMoveListener();
    });

});

Note: I left out the code for your checking the modal's CSS. Instead, you may be able to add/remove the mousemove event handler at the same time that you hide/show the modal element. You could ignore this suggestion and put your CSS check code inside your onMouseMoveHandler(ev) method, but you might experience a performance issue since mousemove events tend to fire very often.

Answer 2

If i consider your idea right, example to change/revoke clickevents: Here is the copepen ( http://codepen.io/f7o/pen/jrBrWx )

on load: console logs mouse move on click on test link: mouse move isn't tracked anymore

If your using jQuery make sure you call the buttonEvents function on clicking some button $('#someButton').click(...)

Answer 3

In your code mistake - userActivity is circular callback. Each move this born new move listners. Change to:

$(document).ready(function() {
    var userActivity = function() {
        console.log("The mouse moved");
    }
    $(document).on('mousemove', userActivity);
    $('.reset').click(function() {
        modal.hide();
        $(document).on('mousemove', userActivity);
        console.log('The mouse moved.');
    });
    $('.close').click(function() {
        modal.hide();
    });
    if ($('.photoCnt').css('display') === 'block') {
        $(document).off('mousemove', userActivity);
    }
});

Hope, it works :)

Answer 4

The .on() function expects at least two arguments. The first is the name of the event you want to listen to and the second is the function which should be invoked whenever the event fired. (See http://api.jquery.com/on/ )

Therefore $(document).on('mousemove') does not install any event handler in your first example.

One solution is to name your event handler.

function myEventHandler() {
  document.log("The mouse moved");
}
// ...
$(this).mousemove(myEventHandler);
// ...
$(document).on('mousemove', myEventHandler);