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

我希望能够模仿Android Webkit中所有元素上的:active伪类的行为。目前，:active语法仅适用于a元素（链接）。几乎所有我正在处理的应用程序中的可操作元素都不是标准链接标记。 iOS webkit支持所有元素上的:active。如何模拟：android中的非链接元素中的活动css伪类？

/* 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]是解决类似的问题，但他们都有点沉重，我想知道是否有一种重量更轻的解决方案，我只是无法找到。

来源

2011-02-09 chas s.

的 “：激活” 实际上当你点击或按元素伪类被触发。智能手机的解决方法是使用Javascript事件：“ontouchstart”&“ontouchend”。

尝试使用ontouchstart修改风格和ontouchend实际触发动作。

来源

2011-03-01 16:58:11

基于什么@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

编辑从我的博客摘自：我自从发现按键可以偶尔在假激活状态的“大棒”。解决这个问题也是为了处理touchcancel事件。例如。将此添加到上面..

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

来源

2011-11-16 12:33:58

它使用jQuery的来源。没有任何外部库的反应会更简单。 – 2012-04-05 10:23:05

@caffein，它可能不会“简单”。你见过本地的JS DOM api吗？另外，你会被跨浏览器支持破坏。整个jquery的重点是“简单” – MikeMurko 2012-09-19 13:53:01

是的，但在手机上使用jQuery是一个坏主意 – 2013-06-21 12:51:02

No-jQuery版本基于Ben Clayton's solution。

编辑：添加“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); 
    } 
    } 
}

来源

2012-04-07 22:01:27 nagoya0

如果你不希望使用任何脚本，增加和元素的激活状态消除类，只是空touchstart事件添加到身体标记：

<body ontouchstart="">

这会告诉android设备处理触摸事件，伪类：活动将在所有元素上正常工作。

来源

2012-11-26 10:04:17 Nadia

试试这个。这对我的作品完美地在Android

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

来源

2013-05-08 08:50:11 MaXo

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

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

来源

2013-09-06 09:51:50 RyanBay

既然我无法评论，我要在这里添加另一个答案。

Nadzeya提出以下解决方案：

<body ontouchstart="">

这样确实如所描述的，但我相信它也可能有意想不到的后果。

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

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

因为我无法可靠地重现问题，所以我不能确定这是什么原因，但现在我要离开标签并以另一种方式解决：活动问题。

来源

2014-03-14 21:19:19 DavidM

你只需把这个代码的文件中：

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

来源

2014-03-24 08:53:21

我有一个简单的替代解决方案。然而，这要求您将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

来源

2016-03-28 14:30:27 Mani

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

回答

相关问题