Question

在Android 4.1.2上点击Phonegap 3.0应用中的元素时，我完全摆脱了可怕的高光。

当点击一些元素时，我首先在tapped元素下获得一个橙色（在这种情况下）突出显示，但后来快速连续的父元素（或另一个祖先元素，不确定哪个）也显示一个亮点！

我知道点击突出显示可以被setting a transparent color“禁用”：

* {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
}

这实际上适用于我的应用中的大多数可点击元素，但在某些元素上，父/祖先元素仍然获得一个亮点！我创建了一个 demo ，它显示了我正在测试的设备上的外观（三星Galaxy S3）。是啊，没错。我正在使用jsfiddle作为动画工具： - ）

我已经尝试了另一个线程中讨论的所有内容：Disable orange outline highlight on focus。

由于点击突出显示实际上在使用上述css规则轻敲的所有元素上消失，我开始怀疑这个次要的较大高亮显示除了点按之外的其他内容。但是我试图将css规则扩展为适用于*:hover, *:active, *:focus但没有成功。

我还尝试在css之外和Android应用程序本身中解决问题。 WebSettings中的第一个setLightTouchEnabled()看起来很有希望，但是A）它没有用，B）从API级别18开始，它已经过时，没有效果。

我真的很茫然。任何帮助都会非常感激。

Answer 1

这是你需要的。

web kit tap color

最后浏览视频。会告诉你它是否正确。：）

这是git hub项目

github

Answer 2

您应该能够摆脱这些轮廓和边界，并将'outline'属性添加到现有的CSS中：

* {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
   outline: 0;

}

可选地，为每一行添加！important，因为显然phonegap也有一些默认样式。

Answer 3

在你的情况下试试这个，

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

将此处的alpha值设置为零应该使其“不可见”。

还有更多行可以使它正常工作，

请参阅更新后的fiddle

中的课程.link

.link {
    display: block;
    padding: 5px;
    border-style:none; 
    outline-style:none; 
    -webkit-appearance: textarea;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    -webkit-tap-highlight-color: transparent;
}

其他事情保持不变..

此外，如果（特别是iPhone）我看到你从事件中返回。

与preventDefault中的jQuery相同，因此在phoneGap中也可以使用，因为它也是基于JS的框架。

<a class="link"
  href="javascript:void(0);"
  ontouchstart="return true;"></a>

我认为这样做，如果没有完成，请尝试回复..

Answer 4

CSS方面：

  * {
 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
:focus {
    outline: 0;
    border: none;
    color: rgba(255, 255, 255, 0);
}
div {
-webkit-appearance:none;
}

我发现在用户端，进入设置 - ＆gt;辅助功能 - ＆gt;安装网页脚本并将其更改为“不允许”会停止显示超链接周围的突出显示。 (see screenshot)

不幸的是，我无法访问phonegap，因此我无法重现您的实际情况。

Answer 5

你可以尝试一下，

* {
   -webkit-tap-highlight-color:  rgba(255, 255, 255, 0) !important; 
   -webkit-user-modify: read-write-plaintext-only;
}

这样可以删除您点击的高亮颜色。

Answer 6

我在一篇可能也非常有趣的帖子中发现了这一点，因为您可以根据需要编辑CSS：

<强> HTML

<a class="html5logo"
  href="javascript:void(0);"
  ontouchstart="return true;"></a>

<强> CSS

.html5logo {
 display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}

http://phonegap-tips.com/demos/webkit-tap-highlight-color.html

或者如果你想要幻想： https://material.google.com/motion/choreography.html#choreography-creation

在Android 4.1.2上的Phonegap 3.0应用程序中无法完全摆脱点按高亮颜色

6 个答案: