#fastclick

The world record for the fastest mouse click speed is currently 619 clicks per minute. To achieve this score, you will need to be extremely quick and accurate! Can you beat the world record? Good luck - and don't forget to practice!

Nice and easy library to eliminate the slow reaction on mobile websites:

https://github.com/ftlabs/fastclick

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.

Simple javascript implementation via:

<script type='application/javascript' src='/path/to/fastclick.js'></script> window.addEventListener('load', function() { FastClick.attach(document.body); }, false);

This removes the click delay the easy way, which, according to Google, is there for:

On touch devices, a click event has a 300ms delay before firing. The reason for this the delay is that browsers need that buffer to make sure you aren’t going to double-tap on anything. The result is that if you use click events blindly, that delay creates a noticeable lag as users interact with elements on your page.

There has been a Google + post by Rick Byers floating around the last few days claiming the best way to deal with the delay was to eliminate the double-tap zoom altogether. With no double-tap gesture to worry about, browsers no longer need that 300ms buffer and can now fire click events immediately.

...

As Patrick Lauke pointed out on Twitter, this leaves three different solutions for developers, depending on the scenario:

Use something like FastClick, to account for iOS.

Use FastClick or kill scalability (as we’ve just discussed, a bad idea) for Chrome versions 32 and under.

Some time ago I started to develop hybrid Android application. Having part of the application developed in browser I placed it in WebView, it was a real horror :). After that, I arranged a few things but still app was not looking very nice so I said to myself, I will try PhoneGap. I didn't get good results immediately but PhoneGap helped me a lot. This post is about all resources that have helped me with my app development. 

First how to install PhoneGap, I am using Windows so all tutorials will be mostly for Windows OS, this is great step-by-step tutorial for this Building a PhoneGap Android App in Windows: Cordova 2.2.0 with Eclipse 4.2.1.  You can skip first part of tutorial and just download and get ADT Bundle which contains:

Eclipse + ADT plugin

Android SDK Tools

Android Platform-tools

The latest Android platform

The latest Android system image for the emulator

The rest of tutorial  is very good and really saves a lot of time and work.

Next tutorial is from same author Cordova PhoneGap 2.7.0 in Windows with Eclipse: Install to Release. And it follows the steps of the applications development.

Before you write your first line of code it would be a good idea to read Native-like Apps with PhoneGap.In this presentation you will get a few good advice how to develop app in PhoneGap.  

A few good resources:

fastclick.js - tap to click event library

Force Hardware Acceleration in WebKit with translate3d

PhoneGap Documentation

THIS ISSUE IS FIXED:

https://github.com/acidb/mobiscroll/issues/83

I work on a project using both mobiscroll (for selecting stuff from a scrolling wheel) and fastclick (to remove the 300ms delay on iphone on touch events). However, I noticed that when closing a mobiscroll dialog, the click event would be sent to whatever item laying behind the mobiscroll panel.

I managed to reproduce the problem. It seemed that the buttons on the mobiscroll panel both listened to touchend AND click. And it turned out this was true: mobiscroll has defined their own "tap" event, which depends on the 300ms delay for not sending a click event on the elements below the mobiscroll panel.

Using fastclick and mobiscroll can therefor be problematic. But there is a nice fix:

In the mobiscroll.core-file, find this part:

el.bind('touchstart', function (e) { e.preventDefault(); move = false; touch = true; }).bind('touchmove', function () { move = true; }).bind('touchend', function (e) { if (!move) { handler.call(this, e); } }).bind('click', function (e) { if (!touch) { handler.call(this, e); } });

And replace with:

el.bind('click', function (e) { handler.call(this, e); });

Update

Seems like this applies to from mobiscroll 2.4.4: