Question

我希望能够模仿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]，但它们都有点沉重，我想知道是否有一个更轻的解决方案我无法找到

Answer 1

根据@caffein的说法，这里有一个完整的实现：

对于所有人：活动代码，编写看起来像这样的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上使用fast native：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");
 });

Answer 2

如果您不想使用任何添加和删除元素活动状态类的脚本，只需将空 touchstart 事件添加到body标记：

<body ontouchstart="">

这将告诉Android设备处理触摸事件和伪类：active 将在所有元素上正常工作。

Answer 3

基于Ben Clayton's solution的No-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);
    }
  }
}

Answer 4

实际单击或按下元素时会触发“：active”伪类。智能手机的解决方法是使用Javascript事件：“ ontouchstart ”＆amp; “ ontouchend ”。

尝试使用 ontouchstart 修改样式，然后使用 ontouchend 来实际触发操作。

Answer 5

由于我无法评论，我将在此处添加另一个答案。

Nadzeya建议采用以下解决方案：

<body ontouchstart="">

这确实如上所述，但我相信它也可能会产生意想不到的后果。

我们的网站存在一个问题，按钮偶尔会停止工作。实际上，按钮会改变颜色（就像它被按下一样）但是点击事件不会触发。即使在按下后，即使在表单上提交按钮也无法提交表单（不涉及Javascript）。

今天，我再次看到了这个问题。一时兴起，我删除了这个属性，问题就消失了。然后我再次添加它，问题又回来了。

由于我无法可靠地重现问题，我不能确定这是原因，但是现在我将关闭标签并以另一种方式解决：活动问题。

Answer 6

试试这个。它在Android上完美适用于我

.my-button {
     -webkit-tap-highlight-color: blue;
}

Answer 7

尝试将此代码添加到您的HTML中：

<script>
document.body.addEventlistener('touchstart',function(){},false);
</script>

Answer 8

我有一个简单的替代解决方案。但是，这需要您从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

找到来源

Answer 9

您只需将此代码放入您的文档中：

<script type="application/x-javascript">document.addEventListener('touchmove', function(e){e.preventDefault();}, false);</script>

如何模拟：在非链接元素上的android中的活动css伪类？

9 个答案: