Update index.html

Author: JC-ProgJava

docs/index.html

@@ -103,14 +103,38 @@
         y = 30;
 
     var filename = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+    
+    function touchHandler(event)
+{
+    var touches = event.changedTouches,
+        first = touches[0],
+        type = "";
+    switch(event.type)
+    {
+        case "touchstart": type = "mousedown"; break;
+        case "touchmove":  type = "mousemove"; break;        
+        case "touchend":   type = "mouseup";   break;
+        default:           return;
+    }
+    
+    var simulatedEvent = document.createEvent("MouseEvent");
+    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
+                                  first.screenX, first.screenY, 
+                                  first.clientX, first.clientY, false, 
+                                  false, false, false, 0/*left*/, null);
+
+    first.target.dispatchEvent(simulatedEvent);
+    event.preventDefault();
+}
 
     init();
 
     function init() {
         canvas = document.getElementById('drawingCanvas');
-        document.body.addEventListener("touchstart", function (e) {if(e.target == canvas){e.preventDefault();}}, false);
-        document.body.addEventListener("touchend", function (e) {if(e.target == canvas){e.preventDefault();}}, false);
-        document.body.addEventListener("touchmove", function (e) {if(e.target == canvas){e.preventDefault();}}, false);
+        document.addEventListener("touchstart", touchHandler, true);
+    document.addEventListener("touchmove", touchHandler, true);
+    document.addEventListener("touchend", touchHandler, true);
+    document.addEventListener("touchcancel", touchHandler, true); 
         ctx = canvas.getContext("2d");
         w = canvas.width;
         h = canvas.height;