touchstart firing twice on Android 4.2 WebView

[gurdotan]

I'm using FastClick inside a WebView in Android 4.2. After adding some log outputs, it appears that when single-tapping an element in the page, the touchstart event gets fired twice and consequently the touchend and throttled click (via the sendClick function). Has anyone also encountered this or found a workaround?

Thanks

[mattcg]

Ouch! That sounds bad :(

What are interactions like without FastClick? It might be that the wrapper or a JavaScript framework is doing the same thing that FastClick does. One easy way to test this is using the basic example. If there's no delay when tapping layer A then it means you don't need FastClick, but I'd be keen to know why.

[gurdotan]

Well, without FastClick interactions are slower by ~300ms, as expected. The basic example also works as expected from the webview, though I tried it separately, not from within my web app.

I did some more investigation: the problem appears also in the Android browser (not webview embedded in native app). I added some timestamp log messages in the code - here's what I get when I tap the FastClick-enabled element:

onTouchStart: 1360586969511
onTouchStart: 1360586969531
sendClick: 1360586969593
sendClick: 1360586969600

My Android browser user agent string is:

Mozilla/5.0 (Linux; U; Android 4.2.1; en-us; GT-I9100 Build/JOP40D; CyanogenMod-10.1) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

In mobile Chrome I get the same sequence of events but the problem doesn't happen. My Chrome UA is:

Mozilla/5.0 (Linux; Android 4.2.1; GT-I9100 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19

There's an open Android issue about click firing twice in Android 4.1 Jellybean, maybe that can help somehow: http://code.google.com/p/android/issues/detail?id=37550

Real voodoo if you ask me...

[mattcg]

Quick question: are your event listeners capturing? i.e. are you passing true as the third argument to addEventListener?

[gurdotan]

Nope, I'm not using capture phase - the third argument is false. There's a slight change in the plot. I switched to Google's FastButton implementation and it seems to work better. I suspect that this is due to simultaneous use of iScroll 4 and a click-throttling library such as FastClick \ Google FastButton. I didn't go over the entire source code of all of these libraries, but it seems that FastClick and iScroll don't play nicely. Let me know if you have any other insights. Thanks.

[sebastianzillessen]

Unfortunately not working for me...

[Trott]

I believe I am experiencing the same issue. You can experience it for yourself at http://m.ucsf.edu/. On an affected Android device, if you click "Shuttle", it clicks (or pseudo-clicks anyway) twice, so you end up two menus deep (on the shuttle trip planner) rather than on the main shuttle menu (which you can get to from the trip planner by clicking the back button).

Not too long ago, I replaced my own implementation of fastclick (at https://github.com/Trott/LightningTouch) with fastclick. I recall I had the problem with my own implementation too but fixed it. EDIT: Or maybe I didn't... I'll go see if I was smart enough to file a ticket or mention something in the commit logs to jog my memory as to what I did...

[Trott]

The issue seems to happen on Android emulators too, if that's any help.

[kaansoral]

I too always dig into problems like these, check all the libraries, and I always end up at iScroll, and once again we're at iScroll :) Android click problems are EXTREMELY frequent, so the sanest thing to do is to wrap onclicks around a javascript simultaneous click preventer, when I check my logs I always see 2-3 clicks where there should be one.

Also for the event listener question, I've previously confirmed that they were malfunctioning on Android 4.2, so event listener based simultaneous click preventer's weren't working for me

(all on phonegap android 2.3/4.2)

[Trott]

I'm experiencing the problem without iScroll. I don't think iScroll is the culprit here. (I could be wrong--I might be experiencing something different from what's described here, but I don't think so.)

[0hao]

iScroll：

if (this.options.handleClick) { that.doubleTapTimer = setTimeout(function () { ... ev = doc.createEvent('MouseEvents'); ev.initMouseEvent('click'... ... target.dispatchEvent(ev); ... }, that.options.zoom ? 250 : 0);

[kaansoral]

is that a Samsung S4 - because Samsung's webkit's are buggy - I've manually handled double clicks because of Samsung's additional HW bugs