blocks|key|2994112|text|在你的例子中，试试这个，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2994113|-webkit-tap-highlight-color:++rgba(255,+255,+255,+0);+|code-block|syntax|javascript|2994114|将这里的alpha值设置为零应该会使其“不可见”。|2994115|还有一些更多的代码行可以让它更好地工作，|2994116|请参考更新后的fiddle中的.link类|offset|length|style|CODE|2994117|.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;
}|2994118|其他事情保持不变..|2994119|此外，在(特别是iPhone)的情况下，我已经看到您我们从活动中返回。|2994120|与jQuery中的preventDefault相同，因此在phoneGap中也可以这样做，因为它也是基于JS的框架。|2994121|<a+class="link"
++href="javascript:void(0);"
++ontouchstart="return+true;"></a>|2994122|我想这样就可以了，如果没有完成，请尝试并回复..|2994123|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/MarmeeK/RX6hM/2/^0|0|0|0|0|7|6|F|5|7|6|0|0|0|0|0|1|6|9|E|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1C|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1D|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1E|8|@$M|1F|N|1G|O|P]|$M|1H|N|1I|O|P]]|9|@$M|1J|N|1K|1|1L]]|A|$]]|$1|Q|3|R|5|D|7|1M|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1N|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1O|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1P|8|@$M|1Q|N|1R|O|P]|$M|1S|N|1T|O|P]]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|1U|8|@]|9|@]|A|$E|F]]|$1|10|3|11|5|6|7|1V|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]]]

in your case try this,

<pre><code>-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
</code></pre>

Setting the alpha value here to zero should make it "invisible".

also some more lines are there to make it work fine,

Please refer class <code>.link</code> in updated <a href="http://jsfiddle.net/MarmeeK/RX6hM/2/" rel="nofollow"><code>fiddle</code></a>

<pre><code>.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;
}
</code></pre>

Other things remain same..

Also, in case of (specially iPhone) I have seen that you we return from event.

Same as <code>preventDefault</code> in <code>jQuery</code>, so in phoneGap also this may work, as it is also JS based framework.

<pre><code>&lt;a class="link"
 href="javascript:void(0);"
 ontouchstart="return true;"&gt;&lt;/a&gt;
</code></pre>

I think this will do, please try and reply if not done..

blocks|key|2781608|text|CSS侧：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2781609|++*+{
+-webkit-tap-highlight-color:+rgba(255,+255,+255,+0);
}
:focus+{
++++outline:+0;
++++border:+none;
++++color:+rgba(255,+255,+255,+0);
}
div+{
-webkit-appearance:none;
}|code-block|syntax|javascript|2781610|我发现在用户端，进入Settings->Accessibility->Install+web脚本并将其更改为“不允许”会停止在超链接周围显示高亮显示。(see+screenshot)|offset|length|style|BOLD|2781611|不幸的是，我无法访问phonegap，因此无法重现您的实际情况。|2781612|entityMap|0|LINK|mutability|MUTABLE|url|https://db.tt/sPsheveq^0|0|0|A|12|23|G|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@$I|11|J|12|1|13]]|A|$]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

CSS side:

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

I've found that on the user side, going into Settings->Accessibility->Install web scripts and changing that to 'Not Allowed' stops showing a highlight around hyperlinks. 
<a href="https://db.tt/sPsheveq" rel="nofollow" title="&#40;Link is a short link to a dropbox file.&#41;">(see screenshot)</a>

Unfortunately, I have no access to phonegap so I can't reproduce your actual situation.

blocks|key|175168|text|你应该能够去掉那些轮廓和边框，并将'outline‘属性添加到现有的css中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|175169|*+{
+++-webkit-tap-highlight-color:+rgba(0,0,0,0);
+++-webkit-tap-highlight-color:+transparent;+/*+For+some+Androids+*/
+++outline:+0;+|code-block|syntax|javascript|175170|}|175171|可选的，添加！重要到每一行，因为很明显phonegap也需要一些默认的样式。|175172|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You should be able to get rid of those outlines and borders and by adding the 'outline' property to your existing css:

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

}

Optionally, add !important to each line, since apparently phonegap juggles some default styles as well.

blocks|key|173901|text|你可以试一下，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173902|*+{
+++-webkit-tap-highlight-color:++rgba(255,+255,+255,+0)+!important;+
+++-webkit-user-modify:+read-write-plaintext-only;
}|code-block|syntax|javascript|173903|这应该会删除您的情况下的点击突出显示颜色。|173904|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can give this a try,

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

This should remove the tapping highlight color for you case.

blocks|key|175180|text|这是您所需要的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|175181|web+kit+tap+color|offset|length|175182|看一遍最后的视频。会让你知道它是对还是错。:)|175183|这是git集线器项目|175184|github|175185|entityMap|0|LINK|mutability|MUTABLE|url|http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/|1|https://github.com/samcroft/Better-Cordova-button-tap-feedback^0|0|0|H|0|0|0|0|0|6|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|L|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]]]

Here's what you require . 

<a href="http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/" rel="nofollow noreferrer">web kit tap color</a>

go through the video at the end . will let you know if it is right or not . :)

and here's the git hub project

<a href="https://github.com/samcroft/Better-Cordova-button-tap-feedback" rel="nofollow noreferrer">github</a>

blocks|key|175187|text|我在一篇可能也非常有趣的文章中发现了这一点，因为你可以根据需要编辑你的CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|175188|HTML|offset|length|style|BOLD|175189|<a+class="html5logo"
++href="javascript:void(0);"
++ontouchstart="return+true;"></a>|code-block|syntax|javascript|175190|CSS|175191|.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);
}|175192|http://phonegap-tips.com/demos/webkit-tap-highlight-color.html|175193|或者，如果你想变得花哨：https://material.google.com/motion/choreography.html#choreography-creation|175194|entityMap|0|LINK|mutability|MUTABLE|url|1|https://material.google.com/motion/choreography.html#choreography-creation^0|0|0|4|0|0|0|3|0|0|0|1Q|0|0|C|22|1|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@$D|15|E|16|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|18|8|@$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|1B|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|S|3|T|5|6|7|1G|8|@]|9|@$D|1H|E|1I|1|1J]]|A|$]]|$1|U|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|R]]|11|$5|X|Y|Z|A|$10|12]]]]

I found this in a post that might also be super interesting, since you can edit your CSS for you needs:

HTML

<pre><code>&lt;a class="html5logo"
 href="javascript:void(0);"
 ontouchstart="return true;"&gt;&lt;/a&gt;
</code></pre>

CSS

<pre><code>.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);
}
</code></pre>

<a href="http://phonegap-tips.com/demos/webkit-tap-highlight-color.html" rel="nofollow">http://phonegap-tips.com/demos/webkit-tap-highlight-color.html</a>

Or if you want to be fancy:
<a href="https://material.google.com/motion/choreography.html#choreography-creation" rel="nofollow">https://material.google.com/motion/choreography.html#choreography-creation</a>

I have problems completely getting rid of the dreaded highlight when tapping on an element in a Phonegap 3.0 app on Android 4.1.2.

When tapping on some elements, I first get an orange (in this case) highlight under the tapped element, but then in quick succession the parent element (or another ancestor element, not sure which) also shows a highlight!

I know that tap highlight can be "disabled" by <a href="http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html" rel="nofollow noreferrer">setting a transparent color</a>:

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

This actually works for most clickable elements in my app, but on some elements the parent/ancestor element still gets a highlight! I have created a <a href="http://jsfiddle.net/RX6hM/1/" rel="nofollow noreferrer">demo</a> which shows how it looks on the device I'm testing on (A Samsung Galaxy S3). Yeah, that's right. I'm using jsfiddle as an animation tool :-)

I have tried everything discussed in another thread: <a href="https://stackoverflow.com/questions/5210481/disable-orange-outline-highlight-on-focus">Disable orange outline highlight on focus</a>.

Since the tap highlight actually disappears on all element tapped with the css rule above, I'm starting to suspect this secondary larger highlight is indicating something other than a tap. But I have tried to extend the css rule to also apply to <code>*:hover, *:active, *:focus</code> without success.

I have also tried to attack the problem outside of css and in the Android app itself. First <a href="http://developer.android.com/reference/android/webkit/WebSettings.html" rel="nofollow noreferrer">setLightTouchEnabled()</a> in WebSettings seemed promising, but A) it didn't work and B) From API level 18 it is obsolete and has no effect.

I'm really at a loss here. Any help at all would be much appreciated.

Can't completely get rid of tap highlight color in Phonegap 3.0 app on Android 4.1.2

Android

jQuery

在Android 4.1.2上点击Phonegap 3.0应用程序中的元素时，我遇到了完全摆脱可怕的突出显示的问题。当点击一些元素时，我首先在点击的元素下得到一个橙色的高亮显示(在本例中)，但随后快速连续的父元素(或另一个祖先元素，不确定是哪一个)也会高亮显示！我知道点击突出显示可以被“禁用”* {   -webkit...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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