HOW TO: remove the 300ms delay when clicking on a link in JQuery Mobile
2014-05-09 11:30
295 查看
文章来源：http://forum.jquery.com/topic/how-to-remove-the-300ms-delay-when-clicking-on-a-link-in-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:
Copy code
//======================================================== 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:
Copy code
<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>
Now run the script on body load or, preferably, in your pageInit():
Copy code
<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.
Copy code
<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
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:
Copy code
//======================================================== 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:
Copy code
<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>
Now run the script on body load or, preferably, in your pageInit():
Copy code
<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.
Copy code
<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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 5 Ways to Prevent the 300ms Click Delay on Mobile Devices
- How to grant access to SQL logins on a standby database when the guest user is disabled in SQL Serve
- HOW TO: Find the Problem Exception Stack When You Receive an UnhandledExceptionFilter Call in the St
- How to remove the dotted border on Active link state---移除链接激活时出现的虚线
- How to pass the value to the function when clicking on the UIButton
- An explicit value for the identity column in table can only be specified when a column list is used and IDENTITY_INSERT is ON
- How To: set udev rule for setting the disk permission on ASM disks when using multipath on Linux 6.x
- On a new installed FreeBSD server, when you try to SSH to the server as root, you will end up in the
- Reducing the Delay and Power Consumption of Web Browsing on Smartphones in 3G networks阅读笔记
- HOW TO: Find the Problem Exception Stack When You Receive an UnhandledExceptionFilter Call in the St
- Setting an effect when the items in a data provider change on a List control in Flex
- jQuery Click fires twice when clicking on label
- 设置页面的默认焦点控件和默认接受事件控件How Do I Set the DefaultFocus or DefaultButton in a Page Based on a Master Page in ASP.NET 2.0
- 解决tomcat开始出现in production environments was not found on the java.library.path:xxx
- How to remove ^M in the file
- On the Degree of Standard Geometric Predicates for Line Transversals in 3D
- BW----List of logged on users in the Portal
- Xenomai on the Beaglebone Black in 14 easy steps ---fwqlzz love is for ever
- Question 11: Which of the following statements describe the result when standard new cannot allocate the requested storage in C+
- From now on, I will write the blog in english.