如何模拟:在android的非链接元素上的活动CSS伪类?

我希望能够模仿Android webkit中所有元素上的:active伪类的行为。 目前, :active语法仅对元素(链接)起作用。 几乎所有我正在处理的应用程序中的可操作元素都不是标准链接标记。 iOS webkit支持:active对所有元素都: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],但是它们都有点重,而且我想知道是否有一个我找不到的轻量级解决scheme。

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

Solutions Collecting From Web of "如何模拟:在android的非链接元素上的活动CSS伪类?"

根据@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上使用快速本机:活动类,并在Android上降低到JavaScript的优势。

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

编辑:我已经发现,button可以偶尔“粘”在假活跃状态。 解决这个问题也是为了处理touchcancel事件。 例如,添加到上面..

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

如果你不想使用任何脚本,添加和删除一个元素的活动状态的类,只需添加空的touchstart事件到body标签:

 <body ontouchstart=""> 

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

基于Ben Clayton解决scheme的 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); } } } 

当您实际单击或按下某个元素时,会触发“:active”伪类。 智能手机的解决方法是使用Javascript事件:“ ontouchstart ”和“ ontouchend ”。

尝试使用ontouchstart来修改样式和ontouchend以实际触发操作。

由于我不能发表评论,所以我会在这里再添加一个答案。

Nadzeya提出了以下解决scheme:

 <body ontouchstart=""> 

这样做的确如所描述的那样工作,但是我相信它也可能有一个意想不到的后果。

在我们的网站上,button偶尔会停止工作。 事实上,button会改变颜色(就像按下了button),但点击事件不会触发。 即使提交表单上的button,也无法提交表单(不涉及Javascript),即使出现按下button。

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

由于我无法可靠地重现这个问题,所以我不能确定这是什么原因,但是现在我要离开这个标签,以另一种方式解决问题了。

尝试这个。 它在Android上完美的工作

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

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

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

你只需要把这个代码放在你的文档中:

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

我有一个简单的替代解决scheme。 然而,这要求您将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); } 

请在手机差距教程中find源代码