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

Question

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

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