如何使用 --webkit-tap-highlight-color 来突出显示整个 DIV？
我正在努力让 iPhone OS4 在 UIWebView 中的 DIV 上生成默认的点击突出显示（即嵌入在应用程序中，而不是在 Safari 中）。
标记是：
<a href="...">
<div class="item">
<div class="imgWrapper">
<img...>
</div>
<div class="Title">
Title text
</div>
</div>
</a>
我的目标是看起来像本机照片视图的显示 - 即左侧有图像的滚动列表，后跟一些文本，列表条目由细边框线分隔。点击列表条目中的任何位置都应该触发链接 - 在图像上、文本上或列表项分隔符之间的空白上。
我无法用 DIV 上的 onclick=location.href=... 替换该元素，因为我使用自定义 URL 架构将点击反馈给应用程序，而 location.href= 不会触发UIWebView 委托。
这是我到目前为止所尝试过的：
- 纯 HTML，无 CSS - 我得到了点击突出显示，但文本在图像
- 项宽度 320px 向左浮动、img 向左浮动下方流动 - 点击突出显示不再出现在空白或文本上，但在图像上做了
- 很多其他事情！
我对如何使点击突出显示在此 HTML 上正常工作感到困惑 - 有人对如何使其工作有任何想法/示例吗？
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:
- Plain HTML, no CSS - I get a tap highlight, but the text flows beneath the image
- item width 320px float left, img float left - the tap highlight no longer appears on the whitespace or text, but does on the image
- 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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我刚刚完成一个移动网站项目并遇到了一些类似的问题。首先，我会重新考虑您的 HTML 结构，其中 div 位于锚点内部。我不确定这是否符合 HTML 规范。我知道 webview 和 safari 以及所有其他移动设备处理 html 验证的方式不同，有些比其他设备更严格，因此请注意这一点，并确保验证您的文档类型和内容类型。内容类型仍然让我在页面上感到困惑。其次，要使点击突出显示正常工作，您必须将其放置在更高的节点上，然后它仅适用于我认为的锚点。所以你可以用 CSS 在 body 上做这样的事情：
第三，你不能尝试一下
onlick="window.location=your_href;"希望这会有所帮助，或者让你知道要做什么小心。
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:
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.
点击突出显示在为该元素注册了鼠标事件子集（例如，单击、鼠标按下、鼠标移动、鼠标向上等）的元素上。
您可以在 http://www.quirksmode.org/dom/events 上尝试一下/tests/click.html 或 http://www.quirksmode。 org/dom/events/tests/mouseover.html（但测试仅在 iOS5 上运行良好，因为测试表单具有可滚动区域）。
例如，触摸测试页面中心底部的表单元素，您会得到点击突出显示，取消勾选事件，现在触摸表单元素时不再有点击突出显示。
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.
我摆脱了这样的点击突出显示：
I got rid of tap-highlights like this: