Issue with Mobile Safari touch event capturing

Question

I have a mobile web-app running on Safari on an iPad.

It seems that even though the web page is the right size for the screen, dragging the page still makes it scroll partially of screen.

My plan had been to prevent any otherwise unhandled touch event from doing anything:

document.addEventHandler('touchstart', do_nothing, false);

function do_nothing(event) {
    event.preventDefault();
}

Note the final false parameter - this is supposed to tell the handler to only work in event bubbling mode, not capture mode. A touch event on a specific element should still fire as expected.

This does prevent the scrolling. However it also prevents any click events from reaching the page. Can anyone propose a solution that blocks the default page scroll action without also blocking clicks?

Answer 1

The solution appears to be to register the null handler on the touchmove instead of the touchstart event.