WebKit/WebView tap/onclick 默认高亮（Android Ice Cream Sandwich）答案

【问题标题】：WebKit/WebView tap/onclick default highlight (Android Ice Cream Sandwich)WebKit/WebView tap/onclick 默认高亮（Android Ice Cream Sandwich）
【发布时间】：2014-01-20 09:48:24
【问题描述】：

我正在开发一个 webview 应用程序 (4.0.3)，关于冰淇淋三明治 webview 有一件烦人的事情：每次在链接或任何可点击元素上出现点击/点击事件时，都会显示蓝色（我认为它取决于设备）突出显示。它看起来不太好，因为我在元素中添加了自己的点击动作。最新的 jQueryMobile(1.1.1) 似乎不能很好地处理这个问题。在以前的版本中，所有主要的 webkit 样式都已被覆盖。

如果有人知道如何摆脱烦人的亮点，将不胜感激。

干杯， qmacpit

当然，在我问之前我已经尝试过更改它们：

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);

但它不适用于冰淇淋三明治。该解决方案在 Android 2.3 中有效，在该版本中，单击链接时出现臭名昭著的“橙色边框”。看起来它是 WebView 的一部分/设置。您在本机浏览器中浏览页面的行为相同。这真的很烦人，因为它不仅涉及链接，还涉及按钮和其他 html 元素。

此外，它仍然没有被 jQuery Mobile teem 解决，尽管它对图形的影响很大。要么他们还没有看到它，要么他们仍在研究解决方案。

还有其他建议吗？

【问题讨论】：

此属性与您相关吗？ css-infos.net/property/-webkit-tap-highlight-color 还是专门针对 iOS 的？
不幸的是，改变它并不能解决我的问题：[

标签： android webview webkit highlight tap

【解决方案1】：

我发现自己遇到了同样的问题（即使使用上面建议的 CSS，android 也总是突出显示 svg 元素）。老实说，我不知道为什么没有强制执行 css 规则（我 100% 确定它没有被覆盖），但我找到了另一个解决方案。

看起来高亮只显示给设置了 onclick 侦听器的元素。我发现设置一个 onTouchStart 监听器而不是一个 onClick 监听器实际上解决了我的问题。

我在装有 JB 4.2 的 Galaxy Nexus 上对其进行了测试。请注意，在以下示例中应用 css 规则会按预期工作。

<!html>
<html>
<head>
  <title>Click/touch test</title>
  <script type="text/javascript">
  function reset() {
    document.getElementById("A-test").innerHTML="On click listener";
    document.getElementById("A-test2").innerHTML="On touchstart listener";
  }
  window.onload = function() {
   document.getElementById("A-test").onclick = function () {
    this.innerHTML = "see the highlight"
   }

   document.getElementById("A-test2").ontouchstart = function () {
    this.innerHTML = "no highlight here"
   }
  }
  </script>
</head>
<body>
<div id="A-test">On click listener</div>
<div style="height: 60px"></div>
<div id="A-test2">On touchstart listener</div>
</body>
</html>

这是 jsfiddle http://jsfiddle.net/aQ9zM/2/

【讨论】：

【解决方案2】：

我终于找到了答案：] 它是一个 webview 功能，可以禁用调用

setLightTouchEnabled(false)

【讨论】：

对我不起作用。请注意，不推荐使用 WebSettings.setLightTouchEnabled 方法，因为它对 Jelly Bean 没有任何作用，而且效果更好。 developer.android.com/reference/android/webkit/…

【解决方案3】：

如果您在元素上设置这些 css 属性，这应该会消失：

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-focus-ring-color: rgba(0, 0, 0, 0);

【讨论】：

嘿 qmacpit... 你确定吗？因为它在 4.0 上对我来说很好用。此外，根据文档，setLightTouchEnabled 无论如何默认设置为 false。

【解决方案4】：

设置以下css属性：-webkit-tap-highlight-color:rgba(0,0,0,0);这不会导致输入框出现问题。但在这种情况下，您需要访问正在运行的 HTML 代码（尽管您可以将其注入 HTML）。

【讨论】：