Fast Click support for IgniteUI on touch-enabled devices

If you open a webapp on a touch device and start interacting with it - clicking on links, buttons, etc. - you will immediately notice that it feels sluggish and that there is a delay between the moment you tap with your finger, and the moment there is visible cue that some action starts executing. To be more precise, there is indeed a delay, and it is 300 ms - that's the time that will pass before a click event is fired, after a tap event is received by the browser. The delay is required mainly because of double taps and multi-touch guestures like pinching - by adding the delay, the browser ensures that no click event will be fired before the end user has a chance to perform pinching, double tapping, etc. And it actually simulates a click so that all webapps, that have been designed for desktop, can also work on touch devices, without having to explicitly handle touch events. The problem with that is obvious - it makes your app feel slow. and most web apps don't handle double taps, pinches, etc. Therefore they don't need this delay. in this blog post i will present a very simple and elegant way to remove the delay, and have a fast and responsive webapp on touch devices. 

there are multiple solutions that exist on the web, but FT Labs has created a particularly great library that handles the above issue. It has many cases covered for different browser versions and different platforms. I have additionally modified it in order to support mousedown and mouseup events. Some of the components in IgniteUI listen to mousedown/mouseup, instead of just click, and that's necessary, otherwise fast clicks won't work the the original source code. I have forked the project on github and applied the patches to fastclick.js:

https://github.com/attodorov/fastclick

In order to enable fast clicks in your app, you only have to do two things - include a reference to the forked fastclick library, and attach the FastClick object to the document's body, so that everything in your app is fastclick-enabled. Note that you can also attach it to a specific container, in case you don't want to have everything in the document's body receive fast clicks. 

Include this reference:

<script type="text/javascript" src="https://raw.github.com/attodorov/fastclick/master/lib/fastclick.js"></script>

Include this script in thesection of your page:

<script type="text/javascript">
	window.addEventListener('load', function() {
		FastClick.attach(document.body);
	}, false);
</script>

Now your application, including all of the IgniteUI components will react instantly to end-user taps !