Phonegap 2.4.0 with Android 4.2 - strange double click behaviour

Question

I'm using phonegap 2.4.0 to create an Android and iOS App.

Now I recognized that the onclick event in links is fired twice inside the Android App using Android 4.2.2 on a Nexus 4 device, like a double click (althoug I tapped it only once!).

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

libs in use:

• jquery 1.9.1
• jquery mobile 1.3.0 (rc)
• jquery ui 1.10.0
• jquery touch punch 0.2.2
• phonegap 2.4.0

After I clicked (or tapped) the link on my Nexus 4 (Android 4.2.2) the string 'test' is appended twice inside the app.

This does NOT happen when I test it as mobile web app directly in the android browser.

It also works on my Samsung S3 (Android 4.1.2) inside the app. No problem on iPhones, too.

Anyone else recognized this strange behavior? (and maybe was able to fix it? ;-) )

Answer 1

Using a temporary solution from 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);

Answer 2

I handled my similar situation very closely to Soulwax's solution, however I didn't want to hinder fast clicks by the user by keeping track of time intervals. Instead, I simply track the event type in the link's data object and if it's trying to handle a click immediately after a touchstart I ignore that call.

$('.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');
});