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

Question

I have replaced the jQuery live click events to jQuery mobile tap events to increase responsiveness.

I have a feeling this was a bad idea for compatibility reasons.

Is it necessary to have both events, and is there any way to write them both for the same function?

Such as ('click','tap')

Answer 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 () { ...

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

Answer 3

We've developed a small script to solve that problem. Just include it on a global level and your click events will be fired immediately without any problems with the delayed event.

https://github.com/cargomedia/jquery.touchToClick