In jQuery mobile, what's the diff between tap and vclick?

which event should i use to listen to ? why use vclick? and I just don't know which situation to use which.

Solution 1:

In case of jQuery Mobile Tap used to work only on mobile devices. This is not case any more.

VClick was created to bridge a gap between click/tap incompatibility among desktop/mobile devices.

Now days you case freely use tap but there are few problems. Tap will fail on iOS platform. Touchstart should be used instead.

Examples:

VClick

Will work both on desktop and mobile devices.

Android 4.1.1 - No delay
iOS - No delay
Desktop Firefox 19 & Chrome 25.0.1364.152 - No delay

http://jsfiddle.net/Gajotres/PYPXu/embedded/result/

$(document).on('pagebeforeshow', '#index', function(){       
    $( document ).on( "vclick", '[data-role="page"]', function() {
        $( this ).append( "<span style='color:#00F;'>vmouseup fired.</span>" );
    });
});

Tap:

Tap

It used to work only on a mobile devices, now works also on a desktop browsers, but will fail on a iOS with a jQuery Mobile version 1.1 and below.

Android 4.1.1 - No delay
iOS - No delay
Desktop Firefox 19 & Chrome 25.0.1364.152 - No delay

http://jsfiddle.net/Gajotres/k8kSA/

$(document).on('pagebeforeshow', '#index', function(){       
    $( document ).on( "tap", '[data-role="page"]', function() {
        $( this ).append( "<span style='color:#00F;'>tap fired.</span>" );
    });
});

Click

Will work on mobile devices and desktop browsers.

Android 4.1.1 - Visible delay (300+ ms)
iOS - No delay
Desktop Firefox 19 & Chrome 25.0.1364.152 - No delay

http://jsfiddle.net/Gajotres/L2FHp/

$(document).on('pagebeforeshow', '#index', function(){       
    $( document ).on( "click", '[data-role="page"]', function() {
        $( this ).append( "<span style='color:#00F;'>click fired.</span>" );
    });
});

Conclusion

If you want a backward jQM compatibility stick with VClick, in any other case use Tap.

Solution 2:

vclick (virtualized click) simulates the onclick event.

http://api.jquerymobile.com/vclick/

Tap event triggers after a quick, complete touch event single target object.

http://api.jquerymobile.com/tap/

It depends what you are doing but unless you have a specific reason not to (e.g. supporting desktop and mobile with the same js) I would use tap.

More information here https://coderwall.com/p/bdxjzg

Solution 3:

I've just noticed a major difference between 'tap' and 'vclick'. 'vclick' fires if you tab to a button and press the enter key - 'tap' does not.