Tag Archives: android

Chrome touchcancel event & scrolling instead of touchmoving

When you’re devel­op­ing for Chrome for Android, one of the little quirks is that some­times your touch­move events appear to stut­ter and get can­celled almost imme­di­ately. This is evid­ent when you’re try­ing to pan or slide a can­vas, except the Chrome for Android stops after 300 ms and starts scrolling the page instead.

This is actu­ally by design due to the way Chrome pre­vents pages from break­ing scrolling, and it’s fairly easy to fix by call­ing event.preventDefault() in your touch­move handler.

myElement.ontouchmove = function(e){
    // Do things
    e.preventDefault();
}

Using Pixi.js

Pixi.js is a pretty cool low-level game engine that uses Canvas or WebGL to render 2D graphics.

Pixi.js doesn’t give you dir­ect access to the ori­ginal event, so if you’re try­ing to drag ele­ments on a Pixi can­vas, call­ing preventDefault() on your event gives you a func­tion not defined error.

Pixi actu­ally passes the ori­ginal event as e.originalEvent, so for Pixi touch­move events you should use the fol­low­ing code;

myPixiElement.touchmove = function(e){
    // Do things
    e.originalEvent.preventDefault();
}

Further read­ing

For more inform­a­tion on why Chrome is break­ing the touch­move hand­ler, check out Wilson Page’s dis­cov­ery of the 300 ms touch­move can­cel­la­tion or more gen­er­ally the HTML5Rocks touch and mouse primer.