Tuesday, May 04, 2010

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();
+ }
beforeSend: function(xhr) { xhr.setRequestHeader("Emsauthtoken",localStorag
cache: false,


Anonymous said...


I need to differentiate mouseover and click event for IPAD. I need to make a tap as mouseover and long touch ass click. Any ideas ?

Thanks a lot in advance

Anonymous said...

good start