17

アプリの応答性を高めようとしていますが、残念ながら何も役に立たないようです。PhoneGap を使用しているため、タッチ イベントで有名な 300 ミリ秒の遅延が発生しています。

これにより、アプリが非常に反応が悪く遅く感じられますが、これはオプションではありません.

jQuery モバイル ユーザーのこの問題を解決する Fastclick.js などのライブラリをいくつか見ましたが、jQuery モバイルは使用していません。HTML、CSS、JavaScript、jQuery だけを使用してアプリを作成しています。

タッチ クリックの 300 ミリ秒の遅延をなくす方法を見つける必要があります。私が得ることができるどんな助けも楽しみにしています。

ありがとう。

4

3 に答える 3

25

Christophe Coenraets は、彼のTop 10 Performance Techniques for PhoneGap Applicationsでこの問題に取り組んでいます。それは＃6で、ビデオはAdobe 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 で 300 ミリ秒の遅延を修正する唯一の方法:

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

オンクリックの代わりに。fastclick を含む他のソリューションは、Phonegap では機能しませんでした。

于 2014-11-06T01:51:50.870 に答える
1

クリックイベントをトリガーするときにfastclickでいくつかの問題が発生した後、超最小限のソリューションで解決しました。この例では jQuery を使用しています。

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

300m の遅延を取り除きたい要素に .clickable クラスを追加する必要があります。

次に、タッチスタート イベントのすべてのクリック イベントを変更します。

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

今これでなければならない

$(document).on('touchstart', '#elementid', function(e){
   console.log('new event'); 
}
于 2016-08-22T22:46:35.527 に答える