速度修正：如何删除在jQuery Mobile Apps的300ms延迟 [英] 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 Touch ）没有快乐。有一些解决方案将有效，但是这些类型的脚本迫使您将目标元素编码到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.js脚本，添加onLoad监听器，并在span中包装< body> 内容，
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 Wrap： >
Span Wrap:
<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 Apps的300ms延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
