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>
It appears that if you have <a href=”…” rel=”nofollow”> that, with an iPhone, tapping does activate the link, but not the click event. So
“You could just make things easy on yourself and use clicks across the board”
actually doesn’t hold (assuming you want the event handler to run). So to me it seems you always have to include this bit of code.
sorry for the formatting of my previous comment (I had included example html code).
It should say:
It appears that if you have “an anchor tag with href”, that, with an Iphone….
I run code on a real iPhone / iPod Touch / iPad, but also find that it’s useful to run the same code in Safari (in emulation mode), and in the iPhone simulator (which seems not to handle tap!!??).
So I’m doing something like this:
var isRealMobile = (userAgent.indexOf(‘iphone’) != -1 ||
userAgent.indexOf(‘ipod’) != -1 ||
userAgent.indexOf(‘ipad’) != -1) &&
userAgent.indexOf(‘safari’) == -1 && userAgent.indexOf(‘simulator’) == -1;
var touchEvent = isRealMobile ? ‘tap’ : ‘click’;
$(“#something”).bind(touchEvent, something);
Here are the user agent strings I looked at:
Safari emulating:
Mozilla/5.0 (iPod; U; CPU iPhone OS 3_1_3 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7E18 Safari/528.16
Simulator:
Mozilla/5.0 (iPhone Simulator; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8A293
Real iPhone:
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8A293