Safari on iPhone and iPad gives color feedback when touched, I want to stop it

Question

By clicking on an element that has a Javascript handler, the element has a gray overlay. This is normally normal, but I use event delegation to handle the touchdown events of many children. Due to delegation, a "gray overlay" appears above the parent element and looks bad and confusing.

I could attach event handlers to individual elements to avoid the problem, but that would be very expensive. I would prefer to have a webkit css property that I can override to disable it. I already have visual feedback in my application, so no gray overlay is required.

Any ideas?

Answer 1

-webkit-tuk-zest color

To turn off the touch backlight, set the alpha value to 0 (invisible)

Answer 2

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

Answer 3

, , CSS, , ( ), cursor.

a.notTappable {
    cursor:default
}

, , , , , , , ( ). webkit .

.parent {
    pointer-events:none;
}
.parent .descendant {
    pointer-events:default;
}

I mention this only because the performance difference here is significant.