cha*_* s. 20 css android webkit
我希望能够模仿:activeAndroid webkit中所有元素的伪类行为.目前,: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],但它们都有点沉重,我想知道是否有一个我无法找到的重量更轻的解决方案.
Ben*_*ton 21
基于@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上使用快速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");
});
小智 15
如果您不想使用任何添加和删除元素活动状态类的脚本,只需将空touchstart事件添加到body标记:
<body ontouchstart="">
这将告诉android设备处理触摸事件和伪类:active将在所有元素上正常工作.
基于Ben Clayton解决方案的 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实际触发操作。