18

在 Android 4.1.2 上点击 Phonegap 3.0 应用程序中的元素时，我无法完全摆脱可怕的突出显示。

当点击某些元素时，我首先在点击的元素下获得一个橙色（在这种情况下）突出显示，但随后父元素（或另一个祖先元素，不确定是哪个）也显示了一个突出显示！

我知道可以通过设置透明颜色来“禁用”点击突出显示：

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

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

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

由于点击突出显示实际上在使用上面的 css 规则点击的所有元素上都消失了，我开始怀疑这个次要的较大突出显示表示的不是点击。但我试图将 css 规则扩展为也适用于*:hover, *:active, *:focus但没有成功。

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

我在这里真的很茫然。任何帮助都将不胜感激。

4

6 回答 6

4

这是您需要的。

网络工具包点击颜色

最后浏览视频。会让你知道它是否正确。:)

这是 git hub 项目

github

于 2013-09-27T19:56:00.240 回答
2

您应该能够摆脱这些轮廓和边框，并将“轮廓”属性添加到现有的 css：

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

}

可选地，添加 !important 到每一行，因为显然 phonegap 也处理了一些默认样式。

于 2013-09-24T22:02:52.010 回答
1

你可以试试这个

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

这应该会删除您的情况下的点击突出显示颜色。

于 2013-09-27T14:30:42.283 回答
1

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;
}

我发现在用户方面，进入设置->辅助功能->安装网络脚本并将其更改为“不允许”停止在超链接周围显示突出显示。 （见截图）

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

于 2013-09-23T16:16:13.307 回答
1

在你的情况下试试这个，

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

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

还有一些线可以使它正常工作，

请参考.link更新的课程fiddle

.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>

我想这样就可以了，如果没有完成，请尝试回复..

于 2013-09-23T12:40:50.963 回答
0

我在一篇可能也非常有趣的帖子中发现了这一点，因为您可以根据需要编辑 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

于 2016-06-28T17:07:00.143 回答