blog:130111_obstacles_and_traps_of_jquery

Obstacles and traps of JQuery

Celebration of Christmas and New Year have ended. Its time to back to work on projects.
Did some progress on Spot-In's server backend. Begun to update front end. I would like to allow user to delete his own report within few minutes after posting. It's quite ordinal in mobile UI1) that taphold2) event brings additional menu for touched item. I would like to use it to delete record.
Everything looks good till you try. Attached tap and taphold events for items and problems flow out:

  • If you taphold, tap event is executed
  • If you try to scroll down- taphold event is executed. As mentioned is previous problem, taphold is followed with tap.

Well, I could deal with tap and taphold problem if where would be no need to scroll down. This ListViews requirement was my traps. Searched whole web. I've tried various hakish ways of achieving what is needed and each time I've banged head into wall.

Finally, after a week I've found one simple and interesting solution, that really works. Swipe (scroll), taphold work perfectly. Solution is quite simple: taphold threshold and swipe duration threshold must differentiate at least 1ms(millisecond). And these thresholds mus be set before loading JQuery mobile library. Script should look like so:

<script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>
<script type="text/javascript">
    $(document).bind("mobileinit", function () {
        $.event.special.tap.tapholdThreshold = 1000,
        $.event.special.swipe.durationThreshold = 999;
    });
</script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile.min.js"></script>

One problem solved, but one left: how to prevent tap after taphold. I have tried everything what I came up with: various settings, hakish event handling and so on. This bug is registered in official jQuery bug tracked. Resolution- “wont fix” 8-o
And suddenly idea strike my head: unbind tap event on taphold and rebind it later. Little bit lame, but ir works :)

$("#object").on('taphold', function(e){
	$(this).off("click");
	//do whatever is needed
	setTimeout(function(){		//after 3 seconds return click event, as it was removed
		$(this).on("click", function(){
			// TAP event processing
		})
	},3000);
})

Looks like these two snippets let scroll, taphold and tap events to behave friendly without teasing each other :-)
Now I can continue to work on next version of spot-in for android.

P.S. I've found a remote Mac service. But about this later, till I be able to test it.


1)
user interface
2)
click and hold for second
Enter your comment. Wiki syntax is allowed:
If you can't read the letters on the image, download this .wav file to get them read to you.
 
  • blog/130111_obstacles_and_traps_of_jquery.txt
  • Last modified: 2021/04/04 00:15
  • by Ignas