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>

10 thoughts on “jQTouch: Tap vs Click

  1. 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.

  2. 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….

  3. 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

  4. All, the very good advice of John, but I wonder is it a good idea to track ipod ipad and iphone via indexOf. What if Apple added another mobile, iSomething? Would it not be better to track AppleWebKit.*Mobile using a regexp?

  5. Another thing I found is that on the desktop safari with emulated iphone i had to use “click” and not “tap”. Since I debug on my local host, it is enough to exclude localhost

  6. The cross-browser solution is to attach both click and tap listeners and cancel one of them the first time through. You know you will get a tap first, so remove the click listener on tap. If the click listener fires, remove the tap listener.

    All of this UA sniffing is for the birds (as you have found out).

  7. I use something similar, checking for iPhone, iPod and iPad, as well as simulator and general mobile devices

    var userAgent = navigator.userAgent.toLowerCase();
    var isMobile = (userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipod') != -1 || userAgent.indexOf('mobile') || userAgent.indexOf('ipad')) ? true : false;
    clickEvent = isMobile ? 'tap' : 'click';

  8. You have an error in your code:
    $(‘#mylink’).bind(clickEvent, function() {
    e.preventDefault();
    alert(‘Yay! You just ‘ + clickEvent + ‘ed me!’);
    });

    It should be:
    function(e)

Comments are closed.