我一直在努力让我的应用响应更快，但不幸的是似乎没有任何帮助。 我正在使用 PhoneGap，因此我遇到了著名的 300 毫秒触摸事件延迟。
这会让应用感觉非常迟钝和缓慢，这不是一个选择。
我看到一些像 Fastclick.js 这样的库为 jQuery 移动用户解决了这个问题，但我没有使用 jQuery 移动。我正在使用 HTML、CSS、JavaScript 和 jQuery 制作我的应用程序。
我真的需要找到一种方法来消除触摸点击的 300 毫秒延迟。 期待我能得到的任何帮助。
谢谢。
【问题讨论】：
Christophe Coenraets 在他的Top 10 Performance Techniques for PhoneGap Applications 中解决了这个问题。这是第 6 期，视频可在 Adobe TV 上观看（第 31 分钟）。
基本上，300 毫秒的延迟不是错误或性能问题，它是检测可能的双击所必需的功能。
摆脱这种延迟的解决方案是结合使用touch events 而不是click 事件，如下所示：
var trackingClick = false;
var targetElement = null;
var touchStartX = 0;
var touchStartY = 0;
var touchBoundary = 10;
target.addEventListener('touchstart', function(event) {
trackingClick = true;
targetElement = event.target;
touchStartX = event.targetTouches[0].pageX;
touchStartY = event.targetTouches[0].pageY;
return true;
});
target.addEventListener('touchend', function(event) {
trackingClick = false;
//handle click event
...
return false;
});
target.addEventListener('touchmove', function(event) {
if (!trackingClick) {
return true;
}
// If the touch has moved, cancel the click tracking
if (targetElement !== event.target
|| (Math.abs(event.changedTouches[0].pageX - touchStartX) > touchBoundary
|| (Math.abs(event.changedTouches[0].pageY - touchStartY) > touchBoundary)) {
trackingClick = false;
targetElement = null;
}
return true;
});
target.addEventListener('touchcancel', function() {
trackingClick = false;
targetElement = null;
});
但这基本上就是FastClick 正在做的事情（事实上，上面的sn-p 只是一个非常基本的例子，是从fastclick source code 中抄袭而来的）。还有很多其他情况需要处理，所以如果你不想实现自己的库，你应该仔细看看 FastClick。它不仅适用于 jQuery mobile 用户，实际上它甚至不需要 jQuery，它只是一个自包含的小型库。
jQuery 移动用户注意事项：您可以使用 FastClick，但您应该注意内置的类似功能：vclick
tl;dr ：如果您没有 jQuery Mobile，请使用 FastClick
【讨论】：
Fastclick 不适合我。 也许它不支持 Phonegap 或它正在使用的 webview。
修复Phonegap/cordova中300ms延迟的唯一方法：
$('yourElement').on( 'touchstart', function ( startEvent ) {});
而不是点击。包括 fastclick 在内的任何其他解决方案在 Phonegap 中均无效。
【讨论】：
在触发点击事件时出现一些问题后，我用一个超级最小的解决方案解决了这个问题。本示例使用 jQuery。
$(document).on('touchstart', '.clickable', function(e){
// This prevents the click to be completed
// so will prevent the annoying flickering effect
e.preventDefault();
});
您必须将 .clickable 类添加到您想要从中消除 300m 延迟的任何元素。
然后，将所有点击事件更改为 touchstart 事件，这样就可以了
$('#elementid').click(function(e){
console.log('ex event');
}
现在应该是这个
$(document).on('touchstart', '#elementid', function(e){
console.log('new event');
}
【讨论】：