防止移动 Safari/Webview 中 touchstart 上的灰色覆盖答案

【问题标题】：Prevent grey overlay on touchstart in mobile Safari/Webview防止移动 Safari/Webview 中 touchstart 上的灰色覆盖
【发布时间】：2011-02-24 15:47:23
【问题描述】：

我正在 webkit 中构建一个 iOS 应用程序，所以我的整个 UI 是一个 webview。在 webview 外边界附近的任何元素的 touchStart 上（没有绑定 touchStart 事件），我得到一个半透明的灰色框覆盖 webview 的整个区域。我已经消除了 -webkit-tap-highlight-color 或 -webkit-touch-callout 作为原因。我该怎么做才能消除这种行为？

【问题讨论】：

标签： ios webkit mobile-safari

【解决方案1】：

只要把这个样式，你仍然有默认操作，但没有灰色覆盖

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

如果你想移除操作面板，就放这个

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}

你去吧！最后清理链接！

【讨论】：

像魅力一样工作。我用 *{ -webkit-tap-highlight-color: rgba(0,0,0,0); } 从所有内容中删除它
这太棒了，你能告诉我你是怎么发现的吗？我一直在谷歌搜索 safari mobile 的 webkit 前缀/伪类列表，但什么也没找到。
@RoderickObrist 您可能会发现Apple Developers Mobile Safari 参考很有用。
我还建议像@spadict 提到的那样从所有元素中删除高亮对用户体验来说是个坏主意——高亮对于建立元素的触摸目标很重要。如果您看到您点击的第一个链接具有较大的触摸目标，则根据菲特定律，它将减少未来交互的工作量。似乎对可用性有惊人的影响。
Oy @SimonRobb，为捍卫我的评论，我想说上下文决定了是否将其从所有内容中删除是一个好主意。人们可以做出自己的用户体验选择。将 '*' 通用选择器作为一个整体使用本身就是一场争论。

【解决方案2】：

我的工作解决方案是在 html 文档正文的 touchstart 事件上捕获和防止默认值。所有其他更明确的事件处理程序不受影响。我确实遇到了select 元素的问题，我在正文事件处理程序中解决了这个问题（我正在使用 jQuery）：

$('body').live(
'touchstart', 
function(e){
    if(e.target.localName != 'select'){
        e.preventDefault(); 
    }
}

)

【讨论】：

伙计，我找这个已经很久了！谢谢！
css 解决方案似乎还不错
这个解决方案要好得多，即使它不是“原生的”，虽然我认为它应该使用 .on 而不是 .live