Response title
This is preview!
HOW TO: remove the 300ms delay when clicking on a link in JQuery Mobile
in jQuery Mobile
•
9 years ago
Here is how to remove the annoying click delay on your jquery mobile website.
- //======================================================== FASTCLICK
- function FastButton(element, handler) {
- this.element = element;
- this.handler = handler;
- element.addEventListener('touchstart', this, false);
- };
- FastButton.prototype.handleEvent = function(event) {
- switch (event.type) {
- case 'touchstart': this.onTouchStart(event); break;
- case 'touchmove': this.onTouchMove(event); break;
- case 'touchend': this.onClick(event); break;
- case 'click': this.onClick(event); break;
- }
- };
- FastButton.prototype.onTouchStart = function(event) {
- event.stopPropagation();
- this.element.addEventListener('touchend', this, false);
- document.body.addEventListener('touchmove', this, false);
- this.startX = event.touches[0].clientX;
- this.startY = event.touches[0].clientY;
- isMoving = false;
- };
- FastButton.prototype.onTouchMove = function(event) {
- if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) {
- this.reset();
- }
- };
- FastButton.prototype.onClick = function(event) {
- this.reset();
- this.handler(event);
- if(event.type == 'touchend') {
- preventGhostClick(this.startX, this.startY);
- }
- };
- FastButton.prototype.reset = function() {
- this.element.removeEventListener('touchend', this, false);
- document.body.removeEventListener('touchmove', this, false);
- };
- function preventGhostClick(x, y) {
- coordinates.push(x, y);
- window.setTimeout(gpop, 2500);
- };
- function gpop() {
- coordinates.splice(0, 2);
- };
- function gonClick(event) {
- for(var i = 0; i < coordinates.length; i += 2) {
- var x = coordinates[i];
- var y = coordinates[i + 1];
- if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
- event.stopPropagation();
- event.preventDefault();
- }
- }
- };
- document.addEventListener('click', gonClick, true);
- var coordinates = [];
- function initFastButtons() {
- new FastButton(document.getElementById("fastclick"), goSomewhere);
- };
- function goSomewhere() {
- var theTarget = document.elementFromPoint(this.startX, this.startY);
- if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;
- var theEvent = document.createEvent('MouseEvents');
- theEvent.initEvent('click', true, true);
- theTarget.dispatchEvent(theEvent);
- };
- //========================================================
Now in your jquery mobile index.html file, put the following code in the head:
- <head>
- <!-- your css links go here -->
- <script src="scripts/jquery-1.6.4.min.js"></script>
- <script src="scripts/jquery.mobile-1.0.1.min.js"></script>
- <script src="scripts/phonegap-1.3.0.js"></script> <!-- for us phonegap users -->
- <script src="scripts/fastclick.js"></script>
- </head>
- <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.
- <body onload"initFastButtons();">
- <span id="fastclick">
- <div data-role="page" id="one" style="overflow-x:hidden;">
- <div data-role="header" data-id="myheader" data-position="inline">
- ......
- </span> <!-- end fastclick -->
Done! Clicking/tapping through your app should now feel very responsive.
Original code from this thread: https://forum.jquery.com/topic/google-s-fastbutton
2
