android - 如何模拟:active css pseudo class in android on non-link elements?

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]，但它们都有点繁重，我想知道是否有我无法找到的更轻量级的解决方案.

1. http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
2. http://code.google.com/intl/ro-RO/mobile/articles/fast_buttons.html

Answer 1

根据@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。

摘 self 的博客 http://pervasivecode.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html

编辑:我后来发现按钮有时会“粘”在假 Activity 状态。解决此问题的方法是同时处理 touchcancel 事件。例如。将其添加到上面..

.bind("touchcancel",
 function() {
  var $this = $(this);
  $this.removeClass("fake-active");
 });