jQTouch: Tap vs Click

jQTouch has a sweet feature which adds a fast touch or “tap” event. It’s pointless for me to try and rephrase, so learn all about it on the jQTouch blog: Milliseconds Responsiveness and the Fast Tap

Now, the only downside to the tap event, is that it doesn’t work on anything other than Mobile Safari. So for iPhones, you can use tap event, but non-iPhones, you have to use click event. You could just make things easy on yourself and use clicks across the board, but I can tell you that the tap event immensely increases the performance and responsivity for jQTouch apps on iPhones. Good news is, there’s an easy way to work with both.

The code below was inspired by Samuel’s message on the jQTouch Google Group.

<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var isiPhone = (userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipod') != -1) ? true : false;
clickEvent = isiPhone ? 'tap' : 'click';
</script>

You can now easily bind your events as follows:

<a href="#link" id="mylink">Click or Tap me!</a>
<script type="text/javascript">
$('#mylink').bind(clickEvent, function() {
    e.preventDefault();
    alert('Yay! You just ' + clickEvent + 'ed me!');
});
</script>

Note: in my testing, the tap event doesn’t register too well on the iPod Touch. If that seems to be the case, I’d recommend defaulting iPod Touches to use clicks instead. However, since the iPod Touch user agent includes the term “iPhone”, we have to un-include it from our tap list:

<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var isiPhone = (userAgent.indexOf('iphone') != -1) ? true : false;
if(userAgent.indexOf('ipod') != -1) isiPhone = false; // turn off taps for iPod Touches
clickEvent = isiPhone ? 'tap' : 'click';
</script>