What's the best way to handle longtap and double-tap events on mobile devices using jQuery?

It has been reported to jQuery as a bug, but as doubletapping isn't the same as doubleclicking, it does not have a high priority. However, mastermind Raul Sanchez coded a jquery solution for doubletap which you can probably use!Here's the link, works on mobile Safari.

It's easy to use:

$('selector').doubletap(function() {});

-edit-

And there's a longtap plugin here! You can see a demo on your iPad or iPhone here.

rsplak's answer is good. I checked out that link and it does work well.

However, it only implements a doubletap jQuery function

I needed a custom doubletap event that I could bind/delegate to. i.e.

$('.myelement').bind('doubletap', function(event){    //...});

This is more important if you're writing a backbone.js style app, where there is a lot of event binding going on.

So I took Raul Sanchez's work, and turned it into a "jQuery special event".

Have a look here: https://gist.github.com/1652946 Might be useful to someone.

Just use a multitouch JavaScript library like Hammer.js. Then you can write code like:

canvas    .hammer({prevent_default: true})    .bind('doubletap', function(e) { // Also fires on double click        // Generate a pony    })    .bind('hold', function(e) {        // Generate a unicorn    });

It supports tap, double tap, swipe, hold, transform (i.e., pinch) and drag. The touch events also fire when equivalent mouse actions happen, so you don't need to write two sets of event handlers. Oh, and you need the jQuery plugin if you want to be able to write in the jQueryish way as I did.

I wrote a very similar answer to this question because it's also very popular but not very well answered.