我希望能够在 Android webkit 中的所有元素上模仿 :active 伪类的行为。目前，:active 语法仅适用于a 元素（链接）。我正在开发的应用程序中几乎所有可操作元素都不是标准链接标签。 iOS webkit 在所有元素上都支持:active。
/* works on both android iOS webkit */
a:active {
color: blue;
}
/* works on iOS webkit, does not work on android webkit */
div:active {
color: red;
}
我找到了一些解决类似问题的资源 [1,2]，但它们都有点繁重，我想知道是否有我无法找到的更轻量级的解决方案.
【问题讨论】：
根据@caffein 所说，这是一个完整的实现：
对于所有 :active 代码，编写如下所示的 CSS 规则。
my-button:active, .my-button.fake-active {
background-color: blue;
}
然后在您的文档就绪事件中添加以下代码：
if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
$(".my-button")
.bind("touchstart", function () {
$(this).addClass("fake-active");
})
.bind("touchend", function() {
$(this).removeClass("fake-active");
});
}
这样做的好处是在 iOS 上使用快速的原生 :active 类，而在 Android 上回退到 JavaScript。
摘自我的博客http://pervasivecode.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html
编辑：我后来发现按钮有时会“粘”在假活动状态。解决此问题的方法是同时处理 touchcancel 事件。例如。将其添加到上面..
.bind("touchcancel",
function() {
var $this = $(this);
$this.removeClass("fake-active");
});
【讨论】：
如果您不想使用任何脚本来为元素的活动状态添加和删除类，只需将空的 touchstart 事件添加到正文标记：
<body ontouchstart="">
这将告诉 android 设备处理触摸事件，伪类 :active 将在所有元素上正常工作。
【讨论】：
基于Ben Clayton's solution的无jQuery版本。
编辑：添加了“touchmove”事件。
function hasClass(ele,cls) {
return ele.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp("(\\s|^)"+cls+"(\\s|$)");
ele.className=ele.className.replace(reg," ");
}
}
window.onload = function() {
if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
var elements = document.getElementsByClassName("my-button");
for(var i = 0; i < elements.length; i++) {
var elm = elements[i];
elm.addEventListener("touchstart", function() {
addClass(this, "fake-active");}, false);
elm.addEventListener("touchmove", function() {
removeClass(this, "fake-active");}, false);
elm.addEventListener("touchend", function() {
removeClass(this, "fake-active");}, false);
elm.addEventListener("touchcancel", function() {
removeClass(this, "fake-active");}, false);
}
}
}
【讨论】：
":active" 伪类在您实际单击或按下元素时触发。 智能手机的一种解决方法是使用 Javascript 事件：“ontouchstart”和“ontouchend”。
尝试使用 ontouchstart 来修改样式并使用 ontouchend 来实际触发动作。
【讨论】：
由于无法发表评论，我将在此处添加另一个答案。
Nadzeya 提出了以下解决方案：
<body ontouchstart="">
这确实像描述的那样起作用，但我相信它也可能会产生意想不到的后果。
我们的网站出现了一个问题，按钮偶尔会停止工作。事实上，按钮会改变颜色（就像它被按下一样），但点击事件不会触发。即使表单上的提交按钮也无法提交表单（不涉及 Javascript），即使在被按下后也是如此。
今天，我又看到了这个问题。一时兴起，我删除了这个属性，问题就消失了。然后我再次添加它，问题又回来了。
由于我无法可靠地重现该问题，我无法确定这是不是原因，但现在我将关闭标记并以另一种方式解决 :active 问题。
【讨论】：
试试这个。它在 Android 上非常适合我
.my-button {
-webkit-tap-highlight-color: blue;
}
【讨论】：
尝试将此代码添加到您的 HTML：
<script>
document.body.addEventlistener('touchstart',function(){},false);
</script>
【讨论】：
我有一个简单的替代解决方案。但是，这需要您从 div 标签更改为标签。
<a class="html5logo" href="javascript:void(0);" ontouchstart="return true;"></a>
.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);
}
请在phone gap tutorial找到来源
【讨论】：
您只需将此代码放入您的文档中：
<script type="application/x-javascript">document.addEventListener('touchmove', function(e){e.preventDefault();}, false);</script>
【讨论】：