Safari on the iPhone & iPad gives colour feedback on touch, I want to stop this

Question

Clicking on an element which has a Javascript handler makes the element go have a 'grey overlay'. This is normally fine but I'm using event delegation to handle the touchdown events of many child elements. Because of the delegation the 'grey overlay' is appearing over the parent element and looks bad and confusing.

I could attach event handlers to the individual elements to avoid the problem but this would be computationally very wasteful. I'd rather have some webkit css property that I can override to turn it off. I already have visual feedback in my app so the 'grey overlay' is not needed.

Any ideas?

Answer 1

-webkit-tap-highlight-color

To disable tap highlighting, set the alpha value to 0 (invisible)

Answer 2

$('body').bind('touchstart', function(e){ e.preventDefault() })