Question

我正在开发一个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解决，尽管它对图形的影响非常大。要么他们还没有看到，要么他们仍在努力寻找解决方案。

还有其他建议吗？

Answer 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/

Answer 2

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

setLightTouchEnabled(false)

Answer 3

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

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

Answer 4

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

WebKit / WebView点击/点击默认高亮（Android冰淇淋三明治）

4 个答案: