Event-event triggered after jQuery Mobile 1.1.1 call

Question

I am developing an application for iOS using Phonegap bundled with jQuery Mobile 1.1.1. I have a div on my page that listens for tap and taphold events.

The problem I am facing is that the tap event is fired after the taphold event when I lift my finger. How can I prevent this? The solution is provided here , but is this the only way to do this? Kinda negates the whole point of having two different events for tap and taphold if you need to use a boolean flag to distinguish between two.

Below is my code:

$('#pageOne').live('pageshow', function(event) { $('#divOne').bind('taphold', function (event) { console.log("TAP HOLD!!"); }); $('#divOne').bind('tap', function () { console.log("TAPPED!!"); }); }); 

I would be very grateful for the help. Thanks!

Answer 1

[Tried and tested] I checked the jQuery Mobile implementation. They fire the tap event after taphold each time on vmouseup.

The workaround will not trigger the tap event if taphold has been fired . Create a custom event or modify the source as 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 ); }); } }; 

Answer 2

Just set this at the top of the document or anywhere before you determine the parity:

 $.event.special.tap.emitTapOnTaphold = false; 

Then you can use it as follows:

 $('#button').on('tap',function(){ console.log('tap!'); }).on('taphold',function(){ console.log('taphold!'); }); 

Answer 3

You can use jQuery's stopImmediatePropagation () method to solve this problem. According to the explanation in jquery api , the stopImmediatePropagation () method

"Stops the rest of the handlers and prevents the event from spoiling the DOM tree."

Answer 4

put this in the taphold event handler ... this assumption assumes that o is the jQuery object that triggered taphold

jQuery (o) .one ('tap click', function () {return false;});

binding to a single method will fire an event only once. return false will stop the execution of this event if it was <a>.

Answer 5

Since swipe, taphold triggers, I was able to save this simply:

  $(c).bind("taphold",function(e){ if(e.target.wait){ e.target.wait = false; }else{ alert("fire the taphold"); }//eo if not waiting }); $(c).bind("swipe",function(e){ e.target.wait = true;//taphold will come next if I don't wave it off alert(e.target.text+"("+e.target.attributes.dataId.value+") got swiped"); return false; }); 

To support clicking, I would postpone the wait until it touches the click event, which will also fire.

Answer 6

I still have problems with jquery-mobile taphold, I solved the click problem caused after taphold by putting a timeout on the element. JQM 1.4 with emitTapOnTaphold = false;

Example:

 $(".element").on("taphold", function () {       // function her        setTimeout (function () {            $(this).blur();        400); }); 

Answer 7

$. 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 ); }); } 

};

@Akash Budhia: Thanks for your decisions. It's great, it sounds, it works for me!