速度修复:如何消除 jQuery Mobile 应用程序中的 300 毫秒延迟 [英] Speed Fix: How to Remove the 300ms Delay in jQuery Mobile Apps
问题描述
如何从 iOS 上的移动 Safari 中消除点击/点击延迟?
How do you remove the click/tap delay from mobile Safari on iOS?
我对事件侦听器进行了相当多的摆弄，并使用了许多不同的脚本(例如 Lightning触摸) 没有快乐.有一些解决方案是可行的，但是这些类型的脚本强制您为 DOM 上的每个链接编写一个目标元素.不幸的是，这可能会导致一些快速和缓慢的转换，这对我不起作用.
I have fiddled around with event listeners quite a bit, and have used a bunch of different scripts (such as Lightning Touch) to no joy. There are a few solutions which would have worked, however these types of scripts force you to code a destination element to every link on the DOM. This unfortunately could cause some fast and some slow transitions, which won't work for me.
推荐答案
经过不懈的搜索，我终于找到了解决速度问题的答案，它以 FastClick 的形式出现(这个线程 非常详细，并在其他用户的评论中做了一些调整).
I finally found the answer to my speed woes after tireless searching, and it comes in the form of FastClick (this thread goes into great detail, along with some tweaks in the comments from other users).
合并 FastClick.js 脚本，添加 onLoad 侦听器，并将您的 内容包装在一个 span 中，您的应用应该开始感觉更加原生.
Incorporate the FastClick.js script, add the onLoad listener, and wrap your <body> content in a span, and your app should start feeling much more native.
onLoad 监听器:
跨度环绕:
<body onLoad="initFastButtons();">
<span id="fastclick">
[...]
</span>
</body>
FastClick.js
//======================================================== 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);
};
//========================================================
这篇关于速度修复:如何消除 jQuery Mobile 应用程序中的 300 毫秒延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
