How can I get --webkit-tap-highlight-color to high

问题:

I'm struggling to get iPhone OS4 to produce the default tap highlight on a DIV, in a UIWebView (ie embedded in an application, not in Safari).

The markup is:

<a href="...">
<div class="item">
 <div class="imgWrapper">
   <img...>
 </div>
 <div class="Title">
  Title text
 </div>
</div>
</a>

I'm aiming for a display that looks like the native photos view - ie a scrolling list with an image at the left followed by some text, with list entries separated by a thin border line. A tap anywhere in the list entry should fire the link - on the image, on the text or on the whitespace between the list item separators.

I can't replace the element with an onclick=location.href=... on the DIV, because I'm using a custom URL schema to feed the click back to the application, and the location.href= doesn't trigger the UIWebView delegate.

Here's what I've tried so far:

1. Plain HTML, no CSS - I get a tap highlight, but the text flows beneath the image
2. item width 320px float left, img float left - the tap highlight no longer appears on the whitespace or text, but does on the image
3. A bunch of other things!

I'm stumped as to how to make the tap highlight work properly on this HTML - anybody got any ideas/examples of how to make this work?

回答1:

I'm just finishing up a mobile site project and ran in to some similar issues. First, I would reconsider your HTML structure with the div's inside of anchor. I'm not sure that fits the HTML spec. I know that the webviews and safari and all the other mobile devices handle html validation differently, some more strict than others so watch out for that and be sure to validate your doc type and content type. Content type is still burning me on pages. Second, to get the tap highlight to work you have to put in on a higher node and then it will only apply to anchors I think. so you could do something like this on the body with CSS:

body {
    -webkit-tap-highlight-color: #ccc;
}

Third, couldn't you try an onlick="window.location=your_href;"

Hope this helps, or gives you an idea of what to watch out for.

回答2:

The tap-highlight shows on an element that has a subset of mouse events (e.g. click, mousedown, mousemove, mouseup etc) registered for the element.

You can try it out on http://www.quirksmode.org/dom/events/tests/click.html or http://www.quirksmode.org/dom/events/tests/mouseover.html (but test only works well on iOS5 because the test form has scrollable areas).

E.g. touch the form element at centre bottom of the test page and you get tap highlight, untick the events, and now there is no tap highlight any more when touching the form element.

回答3:

I got rid of tap-highlights like this:

body {
    -webkit-tap-highlight-color: transparent;
}