Fast tapping causes two clicks to occur

[mattg]

If you tap very quickly on an element, it causes two clicks to occur. This can most easily be recreated when tapping the Back button, as the previous page will mostly likely have a Back button in the same place.

[toddparker]

Thanks. Can you specify what device and version you're seeing this on and steps to reproduce.

[mattg]

Alpha 4. HTC Incredible. Android with HTC Sense 2.2.

I've seen this problem reported in the forum, as well.

[mattg]

This is also happening on my iPad 2 and iPhone 4, both running the latest public version of iOS.

[mattg]

FWIW, I have $.mobile.defaultTransition = 'none'; set. Removing that seems to prevent the bug from happening in iOS. It still happens in Android, though.

[toddparker]

Thanks for the follow-up, that explains why I can't seem to reproduce on our demo pages in iOS because we have the slide transition. It sort of makes sense because if there isn't a transition, the page swap may happen fast enough that the next page is there while some events are still bouncing around. Definitely related to our new event system.

[jblas]

I checked in a fix for this see issue 1331:

#1331

for details.

[mattg]

I tested with commit d591be5. Issue appears to be fixed. Thank you.

[woztheproblem]

I believe this bug is back on Android in Phonegap on jQuery Mobile B3 and latest. With transitions set to none, if I handle clicks on buttons and manually change pages with changePage, the click is also registered on the new page. I have put up a demo app at http://www.4shared.com/file/mI3Sauj0/AndroidTest.html You will see that if you click on the button, it takes you to page 2, then immediately back to page 1 because the button on the second page also gets the click.

I have put the HTML and JS in a jsfiddle for easy viewing at http://jsfiddle.net/woztheproblem/Kf5hd/ (that page isn't functional though because it is meant for Phonegap.

I have tested the demo app on the Android 2.2 emulator, but the issue itself has been seen in the app I am developing on several Android devices.

Using transitions does resolve this issue, but as you know the transitions on Android are still kind of jumpy, so I'd prefer to use no transitions.

[woztheproblem]

Sorry for posting here when I now realize there are more recent issues related to this. Let me know if you'd like me to move/delete my posts.

I do see from #1904 that if I switch to listening for click instead of vclick, the problem goes away. Is that the preferred solution to this? The discussion in #1925 isn't clear (to me at least) about whether using vclick for this should work. Thank you.

[toddparker]

Yes, if you are navigating or moving things around on the page, click will be safer on Android because the targets of the click can get confused.

[GregRHT]

I am experiencing this bug on iPad 2. I have a menu that flies off when you tap it, and sub-menus move in to the general area where the top menu was. If you tap the top menu fast, a tap enters for a sub menu that moves into the location where you tapped and then a page transition, only associated with a sub-menu tap, occurs. I can privately send you a link and login permissions to a framed out example, if you would like.

[toddparker]

@GregRHT - This could be the same issue. If you click something that causes the screen to re-paint, there is the possibility that the even can seem to fire twice. It doesn't usually happen on iOS but that would be the theory. Are these just normal links?

[GregRHT]

The tap causes a CSS3 transition plus a JavaScript position animation, so there is a repaint. Then the tap links into the anchored element that moves into it's position, but only a fast tap -- not a longer tap. The link to the simplified demo to the problem is on one of our staging servers that was set aside for this problem. I would just like to pass the link with the login and password privately.

[toddparker]

@GregRHT - Can you create a simplified test page using jsbin? We can't really work with a whole app, especially a p/w protected one for an issue. Template:
http://jsbin.com/ahefim/edit

[GregRHT]

I was able to come up with:

http://jsfiddle.net/hzaWP/4

I haven't had much chance to clean the code. This is my first jqm project, and I found myself doing some of the work on my own that I could have integrated into jqm's structure. I embedded the linking doc into the default page. Tapping on a menu item gathers the top menus, selected menu on top, and opens sub-menus. Tapping on the cluster returns back to previous state. In this case, only "Clinical Expertise" contains sub-menus. If you fast tap it, it will most often immediately link to "clinical expertise" or "clinical outcomes", depending on where you have tapped the top menu. (You are supposed to be able to tap the header to go back to home page, which is not working in this example)