Re-enabling touchmove eventlistener. iPhone app with Phone gap

Question

I have the following right at the top of my js (which is needed for the iScroll plugin to work).

document.addEventListener('touchmove', function (e) {e.preventDefault();}, false);

On some pages, I need to re-enable this so normal iPhone scrolling takes over (and to fix bugs where the iphone keyboard does not popup on an input box when iscroll is used on the page).

I can't workout the syntax. Does anybody know how?

Answer 1

You will need to define a function that handles the preventDefault behavior, like so:

document.addEventListener('touchmove', preventDefault, false);
function preventDefault(e) { e.preventDefault(); };

That way later on in your code, you can remove the event listener and re-enable default scrolling:

document.removeEventListener('touchmove', preventDefault, false);

Now you are able to re-add and remove it whenever you need to.

You cannot accomplish this using an inline, anonymous function like in your original post because the only way you can refer to an anonymous function is to first let it fire and then remove the reference to it, e.g.:

document.addEventListener('touchmove', function(e) {
    e.preventDefault();

    // some more logic...

    this.removeEventListener('touchmove', arguments.callee, false);
}, false);

Obviously this is not the effect you would like to have. You could also create an object and store a reference to a method that handles the event. If you're looking to dive a little deeper I found this thread helpful: How to removeEventListener on anonymous function?