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?
2 answers
solution1
1 ACCPTED 2013-04-19 18:20:39
You can add a feature request on the Caja issue tracker to whitelist those events. They currently are not on the whitelist.
solution2
0 2013-04-19 13:46:30
Read the htmlservice docs. You cant manipulate the dom unless you use a caja-compatible way like jquery.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.