2013-02-20 3 views
11

私はphonegap 2.4.0を使ってAndroidとiOSアプリケーションを作成しています。PhoneGap 2.4.0 with Android 4.2 - 奇妙なダブルクリックの振る舞い

リンクのonclickイベントが、Android 4.2.2をNexus 4デバイスで使用してAndroidアプリケーション内でダブルクリック(althougを1回タップしたようなもの)を2回実行したことがわかりました。使用中

<a href="#" onclick="$(this).append('test'); return false;" style="some styles...">some text</a> 

LIBS:

  • のjQuery 1.9.1
  • jQueryのモバイル1.3.0(RC)
  • jqueryのUI 1.10.0
  • jqueryのタッチパンチ0.2.2
  • phonegap 2.4.0

Nexus 4(Android 4.2.2)のリンクをクリック(タップ)した後、文字列 'test'がアプリ内で2回追加されます。

モバイルWebアプリとして直接アンドロイドブラウザでテストすると、これは起こりません。

また、アプリ内の自分のSamsung S3(Android 4.1.2)でも動作します。 iPhoneでも問題ありません。

誰もがこの異常な動作を認識しましたか? (そしておそらくそれを修正することができました?;-))

答えて

15

scirra.com

last_click_time = new Date().getTime(); 
document.addEventListener('click', function (e) { 
    click_time = e['timeStamp']; 
    if (click_time && (click_time - last_click_time) < 1000) { 
     e.stopImmediatePropagation(); 
     e.preventDefault(); 
     return false; 
    } 
    last_click_time = click_time; 
}, true); 
+0

ワンダフルハック:これを行う、

function isDoubleTapBug (e) { // only handle touch events (in case your listener works on mouse events too) if (!'ontouchstart' in document.documentElement)) return false; if (!e.originalEvent.touches) { e.preventDefault(); e.stopPropagation(); return true; // indicate to caller that it's a bug } return false; } 

を次に、あなたのリスナーにします! ;)は魅力的に機能します! – Sebastian

+0

私は同じハックのいくつかのバージョンを実装しました、この1つは美しいです - それは再共有のおかげで、ドキュメントのクリックレベルでそれを決して解決しなかった理由を知りません:) –

+0

偉大な解決策、 "ゴースト"のクリックを検出すると、ボタンはアクティブ状態のままなので、$( '.ui-btn')を追加しました。removeClass( 'ui-btn-active'); afterDefault()の後に。 – Maurix

0

からの一時的な解決策を使用して、私はこれらの複数の/ダブルクリックの理由は、私が同時発生しています、ハードウェアの加速度を誤動作していると思いますクリック+伝播、伝播の防止は簡単ですが、addEventListenerの3番目の引数は私のケースでは尊重されていないので、私は以前に応答したコードでもダブルクリックを防ぐことができません。

あなたそれは多くの作業と不快/醜い修正のように見えるかもしれません

<button class="btn" onclick="if(cw(event)) return true; onclick_logic()">something</button> 

、しかし:LSO last_click_time_cw =(新しいDate())getTime()はどこか

これはonclickの例で初期化する必要がありクリックの問題が数ヶ月間私を傷つけていたようですが、これは私が最初からやっていたはずのことですね

2

私はSoulwaxのソリューションと非常によく似た状況を処理しましたが、ユーザは時間間隔を追跡することにより、代わりに、私は単にリンクのデータオブジェクトのイベントタイプを追跡し、タッチスタート直後にクリックを処理しようとしている場合は、その呼び出しを無視します。

0

私の修正は少し異なりました。 clickは、必要なときにはいつも起動しないので、clickイベントリスナーの代わりにtouchendを使用しました。ボタンをクリックし、クリックイベントリスナーが起動されたとしますが、そのボタンを再度クリックすると、そのボタンはクリックされません。

これはどんな種類のDOM要素にも起こります。私の環境は:

  • jQuery 1.9.1;
  • jQM1.3.2;
  • Phonegap 3.5.0-0.21.14。ここで

私のコードです:

if (window.cordova) { 
    // hack to avoid double tap 
    var lastTapTime = new Date().getTime(); 
    function tryToAvoidDoubleTap(e){ 
     var tapTime = e["timeStamp"]; 
     if (tapTime && (tapTime - lastTapTime) < 300) { 
      // prevent double tap to happen 
      e.stopImmediatePropagation(); 
      e.preventDefault(); 
      // jQM button handling 
      if ($('.ui-btn').length) 
       $('.ui-btn').removeClass('ui-btn-active'); 
      return false; 
     } 
     lastTapTime = tapTime; 
    } 

    // Wait for PhoneGap to load 
    document.addEventListener("deviceready", onDeviceReady, false); 

    // PhoneGap is ready 
    function onDeviceReady() { 
     document.addEventListener("touchend", tryToAvoidDoubleTap, true); 
    } 
} 
0

私は正確に同じ問題に直面していたが、私のアプリ/ゲームはtouchstartに、ダブルタップすることができるようにユーザーを必要としていました。したがって、上記のscirraの解決策は、ダブルタップを500〜1000ミリ秒の必要遅延として使用できませんでした。

Iはタップ最初の(ユーザ)との間の差に気づい及び第二(バグ)タップいくつかの掘削後:

event.originalEvent.touches 

は、第バグタップに使用できません。 だから私は、私の場合を解決し、このバグ検出ヘルパー書いた:

document.addEventListener('touchstart', function (e) { 
    if (isDoubleTapBug(e)) 
    return false; 
    // now do your actual event handling stuff...  
} 
+0

あなたのコードに誤字があります。if(! 'ontouchstart' in document.documentElement)はif(! 'ontouchstart' in document.documentElement)です。 – Miguel