11

phonegap 2.4.0 を使用して Android および iOS アプリを作成しています。

リンクの onclick イベントが、Nexus 4 デバイスで Android 4.2.2 を使用している Android アプリ内で、ダブルクリックのように 2 回発生することを認識しました (タップしたのは 1 回だけですが!)。

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

使用中のライブラリ:

  • jquery1.9.1
  • jquery モバイル 1.3.0 (rc)
  • jquery ui 1.10.0
  • jqueryタッチパンチ0.2.2
  • 電話ギャップ 2.4.0

Nexus 4 (Android 4.2.2) でリンクをクリック (またはタップ) すると、アプリ内に「test」という文字列が 2 回追加されます。

これは、Android ブラウザーで直接モバイル Web アプリとしてテストした場合には発生しません。

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

他の誰かがこの奇妙な動作を認識しましたか? (そして、おそらくそれを修正できたでしょうか? ;-) )

4

5 に答える 5

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);
于 2013-02-27T08:13:04.217 に答える
2

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

$('.link').on('touchstart click', function(e){
  e.preventDefault();

  //Prevent against handling a click immediately after touchstart.
  if(e.type == "click" && $(this).data("lastTouch") == "touchstart"){
    e.stopImmediatePropagation();
    return false;
  }
  $(this).data("lastTouch", e.type);

  $('.nav-bar').toggleClass('active');
});
于 2014-06-19T21:50:12.813 に答える
0

私はまったく同じ問題に直面していましたが、私のアプリ/ゲームでは、タッチスタート時にユーザーがダブルタップできるようにする必要がありました。したがって、上記の scirra ソリューションは、必要な 500 または 1000 ミリ秒の遅延がダブルタップを殺すため、使用できませんでした。

掘り下げた後、最初の（ユーザー）タップと2番目（バグ）のタップの違いに気付きました：

event.originalEvent.touches

2 番目のバグ タップでは使用できません。だから私は私のケースを解決するこのバグ検出ヘルパーを書きました:

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;
}

次に、リスナーで次のようにします。

document.addEventListener('touchstart', function (e) {
  if (isDoubleTapBug(e))
    return false;
  // now do your actual event handling stuff...      
}
于 2014-11-10T14:53:01.347 に答える