如何获取--webkit-tap-highlight-color以突出显示整个DIV？ [英] How can I get --webkit-tap-highlight-color to highlight an entire DIV?

问题描述

我在努力让iPhone OS4在DIV上产生默认点按高亮，在UIWebView中（即嵌入在应用程序中，而不是在Safari中）。 >标记是：

 < a href =...> 
< div class =item> 
< div class =imgWrapper> 
< img ...> 
< / div> 
< div class =Title> 
标题文字
< / div> 
< / div> 
< / a> 
  

我的目标是看起来像原生照片视图的显示器 - 左边的图像，后面跟一些文本，列表条目用细边框线分隔。在列表条目中的任何位置点击都应该触发链接 - 在图片上，文本上或列表项目分隔符之间的空白处。

我无法替换元素，在DIV上使用onclick = location.href = ...，因为我使用自定义网址模式将点击反馈给应用程序，而location.href =不会触发UIWebView代理。 p>

这是我到目前为止所尝试的：

1. 纯HTML，


2. 项目宽度320px float left，img float left - 点按高亮不再出现在空白或文本上，但在图片


3. 一堆其他东西！
   

我很遗憾，如何使水龙头加亮在这个HTML上正常工作 - 任何人有任何想法/例子如何使这项工作？

解决方案

我刚刚完成了一个移动网站项目，遇到了一些类似的问题。首先，我将重新考虑你的HTML结构与div的内部锚。我不确定是否符合HTML规范。我知道webview和safari和所有其他移动设备处理html验证不同，一些比其他人更严格，所以小心，并确保验证您的文档类型和内容类型。内容类型仍在烧我的页面。第二，要获得轻敲突出显示工作，你必须放在一个更高的节点，然后它将只适用于我认为的锚点。所以你可以在CSS上使用这样的方法：

  body {
 -webkit-tap-highlight- color：#ccc;第三，你不能尝试一个 onlick = 
} 
  


$ b < window.location = your_href;

希望这有助于或者告诉你应该注意什么。

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?

解决方案

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.

这篇关于如何获取--webkit-tap-highlight-color以突出显示整个DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！