jQuery mobile- For every live tap event should the

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

You can use the vmouse plugin from jQuery. This will resolve the 300ms delay on click events (mobile only) as well as cases where both click and touch events are triggered.

To get just the vmouse plugin, use the jQuery Mobile Download Builder. Include it after jQuery but before any scripts that will depend on this plugin.

The relevant event is vclick, basic use is as follows:

$(".selector").on( "vclick", function( event ) {
    // To execute
});

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

Answer 4

It seems jQuery mobile has already an event which does just that:

$(function(){
    $('selector').bind('vclick', function(e){
        alert('test');    
        return false;
    });
});

Answer 5

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