Speed up link activation with ontouch events

[GoogleCodeExporter]

When navigating around the pages on the iPhone Safari, it is slower than on
the desktop because it appears Safari waits a little while before
activating the "onclick" event to see if the user in fact wanted to
double-tap instead of single tap.

I experimented with changing the "onclick" events inside "iui.js" into
"ontouchend" events and my results show a significant responsiveness
improvement.

There is a little trickery involved because the "ontouchend" event also
gets called when scrolling and zooming, so I had to detect several other
events and abort the click action appropriately. First I detect any event
which should normally abort onclicks:

var touchClick = 0;
document.addEventListener("touchstart", function() {touchClick = 1;}, true);
document.addEventListener("touchmove", function() {touchClick = 0;}, true);
document.addEventListener("gesturestart", function() {touchClick = 0;}, true);

Then I simply modify the line:

addEventListener("onclick", function(event) {

to:

document.addEventListener("touchend", function(event) {
  if(touchClick != 1) {
    touchClick = 0;
    return;
  }
  //...

Since now I'm no longer listening to onClick events, I will have to add
another code to listen to onClick and prevent the default action. Otherwise
clicking any link may invoke standard navigation. Note that there may be
better ways to code this, but this is the hack for now.

addEventListener("click", function(event) {
  event.preventDefault();
}, true);

Also, inside "iui.css" I found that changing:

a[selected], a:active {background-color: #194fdb !important;

to be:

a[selected] {background-color: #194fdb !important;

prevents the UI lists from being temporarily highlighted while scrolling.

Please provide input on how this can be improved further.

Original issue reported on code.google.com by tyu...@gmail.com on 29 Jul 2009 at 8:43

[GoogleCodeExporter]

I found out that I have to merge the "toggle button" function and "page 
navigation"
functions together into 1 "touchend" function, because calling preventDefault 
on 1
stops the other from working.

Also, clicking on the links and buttons to navigate the page causes Safari to 
put a
small grey box around it which is ugly. To remove the boxes, I added this to 
iui.css:

.button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body > ul > li > a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.toggle {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input:not(input[type|=radio]):not(input[type|=checkbox]) {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Original comment by tyu...@gmail.com on 29 Jul 2009 at 12:00

[GoogleCodeExporter]

Here's a diff for the CSS changes above.

Original comment by tyu...@gmail.com on 1 Aug 2009 at 3:27

Attachments:

• iui.css.diff

[GoogleCodeExporter]

Here's a diff for the javascript changes above.

Instead of modifying the original onclick event, I made a separate handler that
complements it. That way, it will still function in a non-touch environment (a 
la
iPhone 1.0)

Original comment by tyu...@gmail.com on 4 Aug 2009 at 2:36

Attachments:

• iui.js.diff

[GoogleCodeExporter]

It appears recently Google's Gmail webapp was changed (new theme) and their 
message list was 
changed to respond to ontouchend which makes it much more responsive. However I 
don't know why 
they only changed the message list but didn't change the buttons and menus, 
which rely on the slower 
onclick.   

Original comment by tyu...@gmail.com on 24 Nov 2009 at 3:24