I have been struggling with this for a few days now and while there are several related questions on this site, none of them have pinpointed the answer to me.
My goal is to implement drawing on a canvas while in a phonegap application. My particular phonegap app uses jQuery Mobile as well as Backbone for structure but not sure if that is relevant here.
Also, i started by trying to follow this tutorial: https://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html
After getting rid of all of the non-relevant code, it comes down to this:
document.body.addEventListener("touchstart", function (e) {
console.log('touchstart');
}, false);
document.body.addEventListener("touchmove", function (e) {
console.log('touchmove');
}, false);
document.body.addEventListener("touchend", function (e) {
console.log('touchend');
}, false);
In this most basic implementation I see the "touchstart" log message and the "touchend" but never the "touchmove".
I have tried a number of things to make this work including:
1) replacing document.body with the canvas element that i also have on the page.
2) adding e.preventDefault() to the touchstart handler function. Note: this results in the error: "Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted"
Note, the author of the tutorial appears to have had the same issue and has a solution for it which i tried of course but that did not work for me.
Important: Also, while this is a mobile application, i am doing my testing in the chrome browser while in device emulation mode for iPhone 4. if you don't test in this mode you will not get the same problem because touch events won't even be fired in regular web browsing mode.
any help would be much appreciated. thanks.