I have this code working in chrome desktop. I tested it using simulate touch and it works as expected. My surprise came when I tried to watch it on my tablet, using chrome for Android. This is complex but it is supposed to create a touch pad for controling the camera. It captures the start and if you move the finger 50 pixels to any side you start moving towards it. When you stop touching the pad should desapear and the movement should stop. Meanwhile, when I do this on my tablet, it doesn't move at all, and what is more, when I stop touching, if I have moved the finger, the pad never hides... I don't know if this is problem of my code or if it is of the browser itself.
EDIT: I tried firefox for android and it works. It must be something about chrome... I think it is related with e.preventDefault();
The code is the following:
function handleStart (event) {
mando.tactil=true;
mando.tactilX=event.changedTouches[0].clientX;
mando.tactilY=event.changedTouches[0].clientY;
}
function handleEnd (event) {
mando.tactil=false;
animTactil();
mando.tactilX=0;
mando.tactilY=0;
mando.tactilMoveX=0;
mando.tactilMoveY=0;
}
function handleMove (event) {
mando.tactilMoveX=event.changedTouches[0].clientX;
mando.tactilMoveY=event.changedTouches[0].clientY;
animTactil();
}
function animTactil () {
if(mando.tactilX>w/3){
//TACTIL DERECHA
if(mando.tactilMoveX>mando.tactilX+tamanoDedo && mando.tactil){
mando.de=true;
}else if(mando.tactilMoveX>mando.tactilX+tamanoDedo && !mando.tactil && mando.de || mando.de && mando.tactil){
mando.de=false; mando.inerciaDE = vel;
}else{mando.de=false;}
//TACTIL IZQUIERDA
if(mando.tactilMoveX<mando.tactilX-tamanoDedo && mando.tactil){
mando.iz=true;
}else if(mando.tactilMoveX<mando.tactilX-tamanoDedo && !mando.tactil && mando.iz || mando.iz && mando.tactil){
mando.iz=false; mando.inerciaIZ = vel;
}else{mando.iz=false;}
//TACTIL ARRIBA
if(mando.tactilMoveY<mando.tactilY-tamanoDedo && mando.tactil){
mando.ar=true;
}else if(mando.tactilMoveY<mando.tactilY-tamanoDedo && !mando.tactil && mando.ar || mando.ar && mando.tactil){
mando.ar=false; mando.inerciaAR = vel;
}else{mando.ar=false;}
//TACTIL ABAJO
if(mando.tactilMoveY>mando.tactilY+tamanoDedo && mando.tactil){
mando.ab=true;
}else if(mando.tactilMoveY>mando.tactilY+tamanoDedo && !mando.tactil && mando.ab || mando.ab && mando.tactil){
mando.ab=false; mando.inerciaAB = vel;
}else{mando.ab=false;}
}
}
if(tactil){
canvas.addEventListener("touchstart", handleStart, false);
canvas.addEventListener("touchend", handleEnd, false);
canvas.addEventListener("touchmove", handleMove, false);
}