Comments on: jQTouch: Tap vs Click

By: Oskar

Oskar — Fri, 04 Nov 2011 12:53:29 +0000

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)

By: Chris

Chris — Fri, 17 Jun 2011 13:24:02 +0000

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';

By: David Mark

David Mark — Sun, 21 Nov 2010 05:58:02 +0000

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

By: Michael

Michael — Fri, 10 Sep 2010 07:32:00 +0000

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

By: Michael

Michael — Fri, 10 Sep 2010 07:28:05 +0000

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?

By: Tumble Weed

Tumble Weed — Thu, 05 Aug 2010 15:30:55 +0000

Sooooooooooo much appreciated!!!!!

By: John

John — Wed, 07 Jul 2010 18:58:26 +0000

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

By: rblon

rblon — Tue, 11 May 2010 11:08:50 +0000

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

By: rblon

rblon — Tue, 11 May 2010 11:05:47 +0000

It appears that if you have 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.