jQuery Mobile tap and taphold sensitivity issue in iOS - jquery-mobile

Question

In my jQuery Mobile app, I want to use tap and taphold events. I tried using the standard approach of binding event handlers to these events but in case of taphold event, the tap event was always firing so I used the following approach which I found on stackoverflow here:
jQuery calling click event after taphold event
$("#list li").live('vmousedown vmouseup', function (event)
{
if (event.type == 'vmousedown')
{
tapTime = new Date().getTime();
}
else
{
//event.type == 'vmouseup'
//here you can check how long the `tap` was to determine what do do
duration = (new Date().getTime() - tapTime);
//The tap code
if(duration >250 && duration <750)
{
}
//The taphold code
else if (duration >=750) {
}
Now, on an iPhone with iOS 5, I am having the problem that the tap event is being fired and an item is selected when I scroll down a list. I tried to increase the duration for tap event but it seems to have no effect in iOS. Any suggestions?

Answer 1

[Tried and Tested]
I checked jQuery Mobile's implementation. They are firing the 'tap' event after 'taphold' every time on 'vmouseup'.
Workaround would be not to fire the 'tap' event if the 'taphold' has been fired. Create a custom event or modify the source as per you need as follows:
$.event.special.tap = {
tapholdThreshold: 750,
setup: function() {
var thisObject = this,
$this = $( thisObject );
$this.bind( "vmousedown", function( event ) {
if ( event.which && event.which !== 1 ) {
return false;
}
var origTarget = event.target,
origEvent = event.originalEvent,
/****************Modified Here**************************/
tapfired = false,
timer;
function clearTapTimer() {
clearTimeout( timer );
}
function clearTapHandlers() {
clearTapTimer();
$this.unbind( "vclick", clickHandler )
.unbind( "vmouseup", clearTapTimer );
$( document ).unbind( "vmousecancel", clearTapHandlers );
}
function clickHandler( event ) {
clearTapHandlers();
// ONLY trigger a 'tap' event if the start target is
// the same as the stop target.
/****************Modified Here**************************/
//if ( origTarget === event.target) {
if ( origTarget === event.target && !tapfired) {
triggerCustomEvent( thisObject, "tap", event );
}
}
$this.bind( "vmouseup", clearTapTimer )
.bind( "vclick", clickHandler );
$( document ).bind( "vmousecancel", clearTapHandlers );
timer = setTimeout( function() {
tapfired = true;/****************Modified Here**************************/
triggerCustomEvent( thisObject, "taphold", $.Event( "taphold", { target: origTarget } ) );
}, $.event.special.tap.tapholdThreshold );
});
}
};