Touchmove doesn't work with Google apps scripts html service

Question

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?

score 1 · Accepted Answer · answered Apr 19 '13 at 18:20

1

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

answered Apr 19 '13 at 18:20

Corey G

7,754
1
28
28

I assume that means it is not currently possible to do this? – user1760685 Apr 19 '13 at 21:06
Yes although it may be a really simple fix. It's worth filing the feature request – Corey G Apr 19 '13 at 21:33

score 0 · Answer 2 · answered Apr 19 '13 at 13:46

0

Read the htmlservice docs. You cant manipulate the dom unless you use a caja-compatible way like jquery.

answered Apr 19 '13 at 13:46

Zig Mandel

19,571
5
26
36

1

Thanks for your reply, but I'm a bit new to this. I've flipped through the docs, but maybe I'm not understanding the part that is relevant or have missed it. Could you point me to relevant section maybe? – user1760685 Apr 19 '13 at 14:14
I just made a new try with jquery after reading up on it. I have added my new code above. – user1760685 Apr 19 '13 at 16:49

Touchmove doesn't work with Google apps scripts html service

2 Answers2