Prevent page scroll on drag in IOS and Android

javascript html canvas touch
Danny Fox picture Danny Fox · Feb 12, 2012 · Viewed 38.5k times · Source

I'm working on a html5 canvas game, but I don't know how to handle touch events. When a user touch the screen, and drag, then the browser will scroll the page. I would like to prevent it, and get the touch start, and touch end position. Is it possible?

Thanks in advance

Answer

dmp picture dmp · Feb 12, 2012

You need to override the default touch behaviour to stop touchevents dragging the page. Clearly, you'll need to handle them again if your page becomes larger than the available area, but as you're making a game, going to assume you're doing 100%/100% layout. 

function preventBehavior(e) {
    e.preventDefault(); 
};

document.addEventListener("touchmove", preventBehavior, {passive: false});

Edit: here's the W3C recommendation talking about touch events, which might be handy for you.

Related questions

How to clear the canvas for redrawing

After experimenting with composite operations and drawing images on the canvas I'm now trying to remove images and compositing. How do I do this? I need to clear the canvas for redrawing other images; this can go on for a …

Read More
Capture HTML Canvas as gif/jpg/png/pdf?

Is it possible to capture or print what's displayed in an html canvas as an image or pdf? I'd like to generate an image via canvas, and be able to generate a png from that image.

Read More
Using HTML5/Canvas/JavaScript to take in-browser screenshots

Google's "Report a Bug" or "Feedback Tool" lets you select an area of your browser window to create a screenshot that is submitted with your feedback about a bug. Screenshot by Jason Small, posted in a duplicate question. How are …

Read More