[SOLVED] Touchmove doesn't work with Google apps scripts html service

Touchmove doesn't work with Google apps scripts html service

I'm trying to get touchmove events to register with a simple web app written using Google apps scripts html service so that I can make simple web apps that function on the iPad as well as on a desktop.

All I do is first load a web page, which works as expected:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('test page');
}

Then I created a simple canvas on the html page:

<html>
 <canvas id="canvas" width="200" height="200" style="border:1px solid #000000;">
 </canvas>
  <script> 
   var canvas=document.getElementById("canvas");
   var ctx=canvas.getContext("2d");
   ctx.font = "bold 12px sans-serif";
   ctx.fillStyle="black";
   ctx.fillText("TEST",50,50);
   canvas.addEventListener("touchmove",testme,false);
   
   function testme(e) {
     e.preventDefault();
     alert("testme");
   }

   
 </script>
</html>

This is just the latest variant I have tried. Binding click or mousedown or mousemove all work fine in this example on a desktop. However, trying with touchstart or touchmove don't do anything on an iPad. I have tested with both Chrome and Safari on the iPad.

I have also tried adding something like:

document.addEventListener("touchmove",doPreventDefault,false);

And have a simple function that calls preventDefault(), but that didn't help either.

Am I doing something wrong, or do I have to do something different because it is google apps script html service?

I have now tried with jQuery (just read up on how to do it) but it still doesn't seem to work right on the iPad:

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  </head>

<body>
 <p>Test</p>
 <br><br>
 </body>
 <canvas id="canvas" width="200" height="200" style="border:1px solid #000000;">
 </canvas>
  <script> 
   $(document).ready(function() {
   $("#canvas").bind('touchstart',function(e) {
     alert("Hello world!");
   });
   $("p").mousedown(stuff);
   $('#canvas').touchmove(onMove);
 });
 
   var canvas=document.getElementById("canvas");
   var ctx=canvas.getContext("2d");
   ctx.font = "bold 12px sans-serif";
   ctx.fillStyle="black";
   ctx.fillText("TEST",50,50);
   
   function onMove(e) {
     alert("testing");
   }
   
   
   function stuff(e) {
     alert("Stuff");
   }
   
 </script>
</html>

The mousedown event works fine, and it event works with a touch - in fact, it seems mousedown and mouseup correlate work with touches on the iPad. But mousemove doesn't work and neither does touchmove or touchstart or touchend. I have tried with bind and more directly as seen above.

Is there something I'm doing wrong to make this work?

Solution

You can add a feature request on the Caja issue tracker to whitelist those events. They currently are not on the whitelist.