4

我正在开发一个 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 仍然没有解决。要么他们还没有看到它，要么他们仍在研究解决方案。

还有其他建议吗？

4

4 回答 4

3

我发现自己遇到了同样的问题（即使使用上面建议的 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/

于 2013-08-21T17:36:17.097 回答
1

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

setLightTouchEnabled(false)
于 2012-08-02T21:31:34.627 回答
0

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

于 2013-09-20T09:52:46.420 回答
0

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

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-focus-ring-color: rgba(0, 0, 0, 0);
于 2012-07-12T21:19:43.447 回答