如何模拟：在非链接元素在Android的活跃CSS伪类？ [英] How to simulate :active css pseudo class in android on non-link elements?

问题描述

我希望能够模仿的行为：在Android的WebKit的所有元素活跃伪类。目前，：主动语法只适用于 A 元素（链接）。几乎所有的应用程序，我工作的可操作的元素比一个标准的链接标​​记其他的东西。 iOS的WebKit的支持：主动的所有元素

  / *适用于这两个机器人的iOS WebKit的* /
一：主动{
    颜色：蓝色;
}
/ *适用于iOS的WebKit的，并没有对Android的WebKit的工作* /
格：活跃{
    颜色：红色;
}
 

我发现一对夫妇的资源[1,2]，以解决类似的问题，但他们都有点重，我想知道如果有，我只是不能够找到一种重量更轻的解决方案

1. <一个href="http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone">http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
2. <一个href="http://$c$c.google.com/intl/ro-RO/mobile/articles/fast_buttons.html">http://$c$c.google.com/intl/ro-RO/mobile/articles/fast_buttons.html

解决方案

根据什么@caffein说，这里是一个全面实施的：

对于所有：主动code，写的是这样的CSS规则

 我的按钮：活跃，。我-button.fake活性{
 背景色：蓝色;
}
 

然后在你的文档准备事件添加此code：

 如果（navigator.userAgent.toLowerCase（）的indexOf（机器人）＆GT; -1）{
 $（我的按钮）
 .bind（touchstart，函数（）{
     $（本）.addClass（假活性）;
 }）
 .bind（touchend，函数（）{
     $（本）.removeClass（假活性）;
 }）;
}
 

这具有使用快速本地的优势：iOS上的活动类，并下探回的JavaScript在Android

摘自我的博客<一href="http://pervasive$c$c.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html">http://pervasive$c$c.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html

编辑：我自从发现按键可以偶尔在假冒活动状态大棒。对此的解决方法是同时处理touchcancel事件。例如。它添加到上面。

  .bi​​nd（touchcancel
 功能（） {
  变量$此= $（本）;
  $ this.removeClass（假活性）;
 }）;
 

I'd like to be able to mimic the behavior of the :active pseudo class on all elements in Android webkit. Currently, the :active syntax only works on a elements (links). Nearly all of the actionable elements in the app I'm working on are something other than a standard link tag. iOS webkit supports :active on all elements.

/* works on both android iOS webkit */
a:active {
    color: blue;
}
/* works on iOS webkit, does not work on android webkit */
div:active {
    color: red;
}

I've found a couple of resources [1,2] that solve similar problems, but they're both a bit heavy, and I'm wondering if there's a lighter weight solution that I'm just not able to find.

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

解决方案

Based on what @caffein said, here's a full implementation of this:

For all :active code, write CSS rules that look like this.

my-button:active, .my-button.fake-active {
 background-color: blue;
}

Then in your document ready event add this code:

if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
 $(".my-button")
 .bind("touchstart", function () {
     $(this).addClass("fake-active");
 })
 .bind("touchend", function() {
     $(this).removeClass("fake-active");
 });
}

This has the advantage of using the fast native :active class on iOS, and dropping back to JavaScript on Android.

Taken from my blog at http://pervasivecode.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html

EDIT: I've since discovered that buttons can occasionally 'stick' in the fake-active state. The fix for this is to also handle the touchcancel event. E.g. add this to the above..

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

这篇关于如何模拟：在非链接元素在Android的活跃CSS伪类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！