phonegapのアプリから300msの遅延を削除する

Question

私のアプリをよりレスポンシブにしようとしていますが、残念ながら何も役に立たないようです。 私はPhoneGapを使用しているため、タッチイベントの有名な300msの遅延が発生しています。

これは、アプリが非常に反応が遅く、遅くなることはオプションではないと感じさせます。

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

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

ありがとうございました。

Answer 1

Christophe Coenraetsはこの問題を彼のTop 10 Performance Techniques for PhoneGap Applicationsで解決しました。それは＃6で、ビデオはAdobe TV（31分目）にあります。

基本的に、300msの遅延はバグでもパフォーマンス上の問題でもなく、ダブルタップを検出するために必要な機能です。

その遅れを取り除くための解決策ではなく、このようなものでclickイベントのtouch eventsの組み合わせを使用することです：

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は必要ありませんが、それは単なる内蔵フットプリントライブラリです。 jQueryのモバイルユーザのための

注：あなたはFastClickを使用することができますが、組み込みの類似した特徴を認識しておく必要がありますvclick

TL; DR：あなたが持っていない場合はFastClickを使用jQueryのモバイル

Answer 2

Fastclickが動作しません。 Phonegapやそれが使用しているWebviewをサポートしていない可能性があります。

のPhoneGap /コルドバで300msの遅延解決する唯一の方法：

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

の代わりに、onclickのを。 fastclickを含むその他のソリューションは、Phonegapでは動作しませんでした。

Answer 3

clickイベントをトリガするときに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クラスを追加する必要があります。その後

、touchstartイベントのすべてのクリックイベントを変更するので、この

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

は今、この質問については、この

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