Touch events carry over to next screen in Android 2.3.4

[ericburnley]

I'm working on an app for Android 2.3.4 that utilizes multiple pages.
In the navigation, I've used touch events to provide a faster
response. However, the response seems to be almost too fast; the
touch events are carrying over to the next screen, and causing touch
events on the next screen to fire. So basically, you click on a
button, the next page loads, and whatever element on the new page in
the same position you clicked also gets fired.

I've used ontouchstart and ontouchend to style the button divs and li
elements appropriately so they visibly appear to have been clicked,
and then I've tried using the HTML5 Mobile Boilerplate fast button
click js to fire the events' navigation. Both appear to fire multiple
clicks. I just started experiencing this after developing on this app
w/ touch events for a couple weeks now, and can't seem to figure out
why it's happening.

If I resort to onclick events, the behavior stops, but the app is
slower & that's not the experience I want.

The HTML5 MBP fast click code has event propagation handling; not sure
what's going on.
Any ideas?

[Simon MacDonald]

I remember there being a bug on Android for multi-touch:

http://code.google.com/p/android/issues/detail?id=11909

It is possible that your touchstart event is being fired, the touchend
is being queued up and then fired when the next page loads. Can you
try only using touchstart to see what happens?

Simon Mac Donald
http://hi.im/simonmacdonald

> --
> You received this message because you are subscribed to the Google
> Groups "phonegap" group.
> To post to this group, send email to phon...@googlegroups.com
> To unsubscribe from this group, send email to
> phonegap+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/phonegap?hl=en?hl=en
>
> For more info on PhoneGap or to download the code go to www.phonegap.com
>

[ericburnley]

I didn't mention, but it's only doing this for really fast touches.
If I tap and hold for even a small amount of time (far less than a
second, but more than a couple milliseconds), things function fine and
the next screen's element is not clicked. I wonder if there's a way
to control the amount of touch time being watched with the MBP fast
click code...

Anyway, I did test that with just touchstart and it functioned fine,
but my subsequent screen (now utilizing the ontouchstart event) has
content that needs to be scrolled, so touchstart is not really going
to work out.

Think I'm doomed/forced to use onclick?

BTW, Simon, I used your Childbrowser plugin blog post the other night
and was able to get it up & running in practically no time. It was
really easy to follow. Thanks a lot.

[ericburnley]

Ok, I think I figured a way around this.
I started by taking the click event out of the HTML5 MBP code mix, so
the different case lines for touchstart, touchmove, and touchend are
all left alone, but the click event is now set to just break instead
of call the click function in HTML5 MBP's code.

I've included a button on a subsequent page that launches a tel link
to a phone number, and I was having the same issue since the <a href>
link essentially functions like a click event. Using XUI, I had the
touchstart event add on the href attr dynamically and then call fire
click. I was programmatically setting the html to the phone number
since it's pulled from a db anyway:

x$('#PhoneCall').html(Phone).touchstart(function(e) { x$
('#PhoneCall').attr('href', 'tel:' + Phone).fire('click'); });

Might be hack-y, but it seems to be working. If it turns out to be a
solid solution, I may implement it wherever I can to avoid pseudo-
click behavior since upon transitioning pages, I still receive the
Android 'green glow' effect as if I clicked on the new page's element;
the click event is stopped, but it appears as if you clicked on it.
The above code doesn't seem to do it; but I'm still testing it & will
report back if it fails.