jQuery mobile- For every live tap event should there be an equivalent click event?

Solution 1:

Billy's answer is incredibly complete and actually worked quite well the few times I used it. Additionally however, you may want to look at the vmouse plugin in JQuery Mobile, it is an attempt to abstract mouse events:

 // This plugin is an experiment for abstracting away the touch and mouse
 // events so that developers don't have to worry about which method of input
 // the device their document is loaded on supports.

-- https://github.com/jquery/jquery-mobile/blob/master/js/vmouse.js

I've been playing with it on a project I'm working on, it seems pretty responsive these days. To use, something like:

$('selector').bind('vclick', function () { ...

or

$('selector').bind('vmousedown', function () { ...

Solution 2:

You can bind multiple events in one call like this:

$('selector').bind('click tap',function(){ ... })

This might be fine in some browsers/mobiles, however, this might make the events fire twice on some devices who trigger both the tap and click.

You can fix this by doing some kind of device/feature detection and adding the appropriate handler only like this...

$('selector').bind( myCustomDetectionFunction() ? 'click' : 'tap' ,function(){ ... })

Additionally, I think touchstart and mousedown are better events to choose. This is because, after a touch, the click event does not fire until a delay has passed, as the system is allowing the chance for a second touch to make it a double click or for it to become a swipe gesture and so on. The touchstart event fires immediately, as does mousedown so should be more responsive.