17

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

这使应用程序感觉非常迟钝和缓慢，这不是一个选择。

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

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

谢谢。

4

3 回答 3

25

Christophe Coenraets 在其用于 PhoneGap 应用程序的 10 大性能技术中解决了这个问题。这是第 6 期，视频可在Adob​​e TV上观看（第 31 分钟）。

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

摆脱这种延迟的解决方案是使用事件的组合，touch而不是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 源代码中提取的非常基本的示例）。还有很多其他情况需要处理，所以如果你不想实现自己的库，你应该仔细看看 FastClick。它不仅适用于jQuery 移动用户，实际上它甚至不需要 jQuery，它只是一个自包含的小型库。

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

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

于 2013-10-11T12:16:17.920 回答
5

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

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

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

而不是点击。包括 fastclick 在内的任何其他解决方案在 Phonegap 中都不起作用。

于 2014-11-06T01:51:50.870 回答
1

在触发点击事件时出现一些问题后，我用一个超级最小的解决方案解决了这个问题。此示例使用 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'); 
}
于 2016-08-22T22:46:35.527 回答