Question

$('#start') executes the function myFunction() and $('#stop') end it. How do I stop myFunction() from executing?

function myFunction() {
     $(document).mousemove(function(e) {
          $('#field').html(e.pageY)
     });
}


$('#start').click(function() {
    myFunction();
});


$('#stop').click(function() {
   //stop myFunction
});

Answer 1

As Daniel pointed out, you actually want to unbind the event handler. You can use unbind for this:

$('#stop').click(function() {
    $(document).unbind('mousemove');
});

But this will also remove all other mousemove event handlers, that might be attached by other plugins or similar (I mean, you attach to the document element not a “custom” element, so it can be that other JavaScript code also binds handlers to this element).

To prevent this, you can use event namespaces. You would attach the listener with:

function myFunction() {
     $(document).bind('mousemove.namespace', function(e) {
          $('#field').html(e.pageY);
     });
}

and unbind:

$('#stop').click(function() {
    $(document).unbind('mousemove.namespace');
});

This would only remove your specific handler.