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

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.

Leave a Comment