Fast tapping causes two clicks to occur #1350

Closed
mattg opened this Issue Apr 1, 2011 · 15 comments

Projects

None yet

5 participants

@mattg
mattg commented Apr 1, 2011

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
Contributor

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

@mattg
mattg commented Apr 1, 2011

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

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

@mattg
mattg commented Apr 1, 2011

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

@mattg
mattg commented Apr 1, 2011

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
Contributor

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
Contributor
jblas commented Apr 4, 2011

I checked in a fix for this see issue 1331:

#1331

for details.

@jblas jblas closed this Apr 4, 2011
@mattg
mattg commented Apr 5, 2011

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
Contributor

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
GregRHT commented Feb 11, 2012

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
Contributor

@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
GregRHT commented Feb 28, 2012

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
Contributor

@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
GregRHT commented Feb 29, 2012

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment