Question

我一直在尝试让我的应用程序更具响应性，但遗憾的是似乎没有任何帮助。我正在使用PhoneGap，因此我遇到了300毫秒的触摸事件延迟。

这使得应用程序感觉非常无响应且速度慢，这不是一种选择。

我看到像Fastclick.js这样的库为jQuery移动用户解决了这个问题，但我没有使用jQuery mobile。我正在使用HTML，CSS，JavaScript和jQuery制作我的应用程序。

我真的需要找到一种方法来摆脱触摸点击的300毫秒延迟。期待我能得到任何帮助。

感谢。

Answer 1

Christophe Coenraets在他的Top 10 Performance Techniques for PhoneGap Applications中解决了这个问题。这是＃6，视频可在Adobe TV（第31分钟）获得。

基本上，300ms延迟不是错误或性能问题，它是检测可能的双击所必需的功能。

摆脱这种延迟的解决方案是使用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正在做的事情（事实上，上面的代码片段只是一个从fastclick source code中扯掉的非常基本的例子）。还有很多其他情况需要处理，所以如果你不想实现自己的库，你应该仔细看看FastClick。它不仅适用于 jQuery mobile 用户，实际上它甚至不需要jQuery，它只是一个独立的小型脚本库。

注意jQuery移动用户：您可以使用FastClick，但您应该了解内置的类似功能：vclick

tl; dr：如果您没有jQuery Mobile，请使用FastClick

Answer 2

Fastclick对我不起作用。也许它不支持Phonegap或它正在使用的webview。

修复Phonegap / cordova中300ms延迟的唯一方法：

$('yourElement').on( 'touchstart', function ( startEvent ) {});

而不是onclick。任何其他解决方案，包括fastclick在Phonegap中都不起作用。

Answer 3

在触发点击事件时遇到fastclick的一些问题后，我用超小解决方案解决了这个问题。这个例子使用jQuery。

$(document).on('touchstart', '.clickable', function(e){
    // This prevents the click to be completed
    // so will prevent the annoying flickering effect
    e.preventDefault();
});

您必须将.clickable类添加到您想要从300米延迟中取出的任何元素。

然后，更改touchstart事件的所有点击事件，这样

$('#elementid').click(function(e){
   console.log('ex event'); 
}

现在必须是这个

$(document).on('touchstart', '#elementid', function(e){
   console.log('new event'); 
}

从phonegap应用程序中删除300毫秒的延迟

3 个答案: