无法完全摆脱 Android 4.1.2 上 Phonegap 3.0 应用程序中的点击突出显示颜色

Posted 2023-03-06

【中文标题】无法完全摆脱 Android 4.1.2 上 Phonegap 3.0 应用程序中的点击突出显示颜色

【英文标题】：Can't completely get rid of tap highlight color in Phonegap 3.0 app on Android 4.1.2

【发布时间】：2013-09-24 12:07:20

【问题描述】：

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

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

我知道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 开始，它已经过时并且没有任何作用。

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

【问题讨论】：

尝试浏览我在链接中提供的演示。它是如何使用 e.preventDefault() 去除颜色的。

【参考方案1】：

这是您需要的。

web kit tap color

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

这里是 git hub 项目

github

【讨论】：

有趣。但是，它是 customizing 被点击元素的外观的解决方案，看起来它依赖于能够通过将-webkit-tap-highlight-color 设置为透明来隐藏默认外观，这正是我想要的有问题。它还使用了 Zepto.js，所以我需要确保它不会与我项目中的任何其他插件冲突。

试试玩吧 :) 可能会成功。我猜它不会有。如果您有 jquery 冲突，请尝试一下，我找到了一个 SO 链接 :) ***.com/questions/14210588/…

谢谢。我现在正在做另一个项目，所以我现在没有时间玩这个。我会接受这个答案，因为它确实给了我一些新的尝试。大多数其他答案都已在我在问题中发布的链接中提出了 css 建议，我已经尝试过了。

感谢您的帮助:)

【参考方案2】：

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

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

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

【参考方案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）我看到你我们从活动中返回。

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

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

我觉得这样就可以了，如果不行请尝试回复..

【讨论】：

感谢您尝试解决此问题。恐怕我对 jsfiddle 的目的有点不清楚：这不是我遇到问题的代码。该 jsfiddle 的 sole 目的是在“结果”窗口中显示当我在我的应用程序中点击菜单时的样子。基本上忽略 html/css/javascript 窗口，只看一下结果窗口。我想创建一个 gif 动画，但决定创建一个 jsfiddle 一样快:-)。关于您的提示：不幸的是，就次要亮点而言，它们都没有任何区别。

因为我只有在代码在 Phonegap 应用程序中运行时才会出现这种奇怪的行为，所以我没有尝试创建一个重现问题的测试用例（可能需要做很多工作）。我（天真地）希望有人看到我的问题并去：“哦，那个突出显示。要摆脱它，你需要将这个 thingamajig 添加到 whatchamacallit 中。”跨度>

【参考方案4】：

你可以试试看，

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

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

【参考方案5】：

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;

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

很遗憾，我无法访问 phonegap，因此无法重现您的实际情况。

【讨论】：

有趣的是“安装网络脚本”设置。不幸的是，它已经在我的设备上设置为默认的“不允许”。关于css：我真的看不出将alpha设置为255如何使高光消失？ alpha 分量应该在 0-1 之间，其中 1 是完全不透明的，因此将其设置为 255 应该等于将其设置为 1。

对不起，你是对的，我没有完全校对这个。我已经编辑了我的答案以反映这一点。

【参考方案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