How to control button flashing on Android PhoneGap app

Question

I am writing a PhoneGap app on Android. I am trying to stay pure HTML+CSS+JS, without calling specific PhoneGap APIs. So the app is somewhat an embedded web page, more or less.

The page has some "buttons" on it, which are actually table cells with some CSS attributes (among which cursor: pointer) and an onClick function.

I have noticed that when I touch a button, it "flashes" for a second or so, then its corresponding action is performed. By the way, I don't like this very much, since it causes a delay in the UI.

Some of the "buttons" activate a menu. I handle the menu by making visible a semi-opaque black div that covers the whole screen, and above it a centered div containing a table containing the menu items. (the black div and the centered div are hidden, normally).

The problem is that when I touch a menu item, it does not flash; one of the underlying buttons flashes instead (that is, one of those that at the moment are covered by the semi-opaque black div, and are supposed to be inactive). Nevertheless, the correct action is performed, in other words the onClick function of the menu item gets called, not the one of the flashing button .

So my question is two-fold: 1) Is there a simple way to make the right item flash (I mean the menu item instead of the underlying, semi-covered button)? 2) Is there a simple way to totally disable button flashing, so that the UI would speed-up and problem 1 be solved too?

Many thanks

Answer 1

You should be using the touch events, which are supported on Android WebKit. This will prevent the select + touch behaviour that you're seeing on your HTML elements that the onClick event causes.

Android versions past Android 1.5 support touch events such as touchstart and touchend. I recommend using them, and reading Apple's documentation (yes, I know it's weird, but Google's Web App documentation is still poor with respect to touchevents.)