Search jQuery

jQuery Forum

Screen name:
puntai

puntai's Profile

1 Posts

4 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

HOW TO: remove the 300ms delay when clicking on a link in JQuery Mobile
[30Replies]
- 01-Feb-2012 11:48 PM
- Forum: jQuery Mobile
Here is how to remove the annoying click delay on your jquery mobile website.

Create a file called fastclick.js and paste following code in it:
3. //======================================================== FASTCLICK
4. function FastButton(element, handler) {
5. this.element = element;
6. this.handler = handler;
7. element.addEventListener('touchstart', this, false);
8. };
9. FastButton.prototype.handleEvent = function(event) {
10. switch (event.type) {
11. case 'touchstart': this.onTouchStart(event); break;
12. case 'touchmove': this.onTouchMove(event); break;
13. case 'touchend': this.onClick(event); break;
14. case 'click': this.onClick(event); break;
15. }
16. };
17. FastButton.prototype.onTouchStart = function(event) {
18. event.stopPropagation();
19. this.element.addEventListener('touchend', this, false);
20. document.body.addEventListener('touchmove', this, false);
21. this.startX = event.touches[0].clientX;
22. this.startY = event.touches[0].clientY;
23. isMoving = false;
24. };
25. FastButton.prototype.onTouchMove = function(event) {
26. if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) {
27. this.reset();
28. }
29. };
30. FastButton.prototype.onClick = function(event) {
31. this.reset();
32. this.handler(event);
33. if(event.type == 'touchend') {
34. preventGhostClick(this.startX, this.startY);
35. }
36. };
37. FastButton.prototype.reset = function() {
38. this.element.removeEventListener('touchend', this, false);
39. document.body.removeEventListener('touchmove', this, false);
40. };
41. function preventGhostClick(x, y) {
42. coordinates.push(x, y);
43. window.setTimeout(gpop, 2500);
44. };
45. function gpop() {
46. coordinates.splice(0, 2);
47. };
48. function gonClick(event) {
49. for(var i = 0; i < coordinates.length; i += 2) {
50. var x = coordinates[i];
51. var y = coordinates[i + 1];
52. if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
53. event.stopPropagation();
54. event.preventDefault();
55. }
56. }
57. };
58. document.addEventListener('click', gonClick, true);
59. var coordinates = [];
60. function initFastButtons() {
61. new FastButton(document.getElementById("fastclick"), goSomewhere);
62. };
63. function goSomewhere() {
64. var theTarget = document.elementFromPoint(this.startX, this.startY);
65. if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;
67. var theEvent = document.createEvent('MouseEvents');
68. theEvent.initEvent('click', true, true);
69. theTarget.dispatchEvent(theEvent);
70. };
71. //========================================================
Now in your jquery mobile index.html file, put the following code in the head:
2. <head>
3. 
4. <script src="scripts/jquery-1.6.4.min.js"></script>
5. <script src="scripts/jquery.mobile-1.0.1.min.js"></script>
6. <script src="scripts/phonegap-1.3.0.js"></script> 
7. <script src="scripts/fastclick.js"></script>
8. </head>
Now run the script on body load or, preferably, in your pageInit():
2. <body onload="initFastButtons();">
Finally, wrap everything in between your body tags with a span called "fastclick". Note that if you use a div, you'll run into problems with input fields... so use a span.
1. <body onload"initFastButtons();">
2. <span id="fastclick">
4. <div data-role="page" id="one" style="overflow-x:hidden;">
5. <div data-role="header" data-id="myheader" data-position="inline">
6. ......
9. </span> 
Done! Clicking/tapping through your app should now feel very responsive.

Original code from this thread: https://forum.jquery.com/topic/google-s-fastbutton

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend