touchstart and touchmove

For the most part, HTML5 apps test comparably in Safari and on the iPad. One difference that really jumps out is the touch events that the iPad / iPhone implements. My application initially bound events to the click event but I noticed a delay in the iPad so I switched over to the touchstart event. When the application is running in iPad / iPhone, the whole canvas is draggable and looks crappy.

From reading blogs and SO, it seems like the delay in onClick is intentional in iPhone / iPad because the browser (UIWebView, in this case) is waiting to see if there is going to be a gesture. That makes sense to me so any cases where I had a .click I changed to a .bind(clickevent. I set clickevent = click by default but override with clickevent = touchstart when on iPhone / iPad.

In the image below, you can see a big gray space - thats from clicking and dragging the screen down. After implementing the event.preventDefault the view can no longer be dragged down.


$ git diff HTML/main.js
diff --git a/HTML/main.js b/HTML/main.js
index 4e7661b..5bceab2 100644
--- a/HTML/main.js
+++ b/HTML/main.js
@@ -23,6 +23,14 @@ if(window.Touch) {
clickevent = 'touchstart';
}

+// TODO - can combine with other iPad / iPhone checks but keeping separate
+// for now just to make it stand out
+if(window.Touch) {
+ document.ontouchmove = function(event) {
+ event.preventDefault();
+ }
+}
+
$.ajaxSetup({
beforeSend: function(xhr) { xhr.setRequestHeader("Emsauthtoken",localStorag
cache: false,