：active伪类在移动浏览器中不起作用
在iPhone / iPad / iPod上的Webkit中，<a>点击元素时不会触发为标签的：active伪类指定样式。我该如何触发？示例代码：
<style>
a:active {
background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>
aluckdog浏览 831回答 3
3回答
-
慕标5832272
<body ontouchstart=""> ...</body>仅应用了一次，而不是每个按钮元素都可以修复页面上的所有按钮。另外，您可以使用这个名为' Fastclick '的小型JS库。它可以加快触摸设备上的点击事件，也可以解决此问题。 -
LEATH
正如其他答案所指出的那样，:active除非将touch事件附加到元素，否则iOS Safari不会触发伪类，但是到目前为止，这种行为是“神奇的”。我在Safari开发者库中遇到了这个小问题，对此做了解释（强调我的意思）：您还可以将-webkit-tap-highlight-colorCSS属性与设置触摸事件结合使用，以将按钮配置为类似于桌面。在iOS上，鼠标事件发送得如此之快，以至于永远不会收到按下或活动状态。因此，:active仅在HTML元素上设置了触摸事件时（例如，如下所示在元素上设置ontouchstart时）才触发伪状态：<button class="action" ontouchstart="" style="-webkit-tap-highlight-color: rgba(0,0,0,0);"> Testing Touch on iOS</button>现在，在iOS上轻按并按住按钮时，该按钮将更改为指定的颜色，而不会出现周围的透明灰色。换句话说，设置一个ontouchstart事件（即使它为空）也明确地告诉浏览器对触摸事件做出反应。在我看来，这是有缺陷的行为，并且可能可以追溯到“移动”网络基本不存在的时间（请看链接页面上的屏幕截图以了解我的意思），并且所有内容都是基于鼠标的。有趣的是，其他更新的移动浏览器（例如，在Android上）在触摸时显示'：active'伪状态也很好，而没有像iOS所需要的任何黑客手段。（旁注：如果您想在iOS上使用自己的自定义样式，还可以:active通过使用-webkit-tap-highlight-colorCSS属性来禁用iOS用来代替伪状态的默认灰色半透明框，如上面同一链接页中所述）经过一些实验后，在所有触摸事件然后冒泡ontouchstart的<body>元素上设置事件的预期解决方案无法完全发挥作用。如果元素中视可见的页面加载时，那么它工作正常，但向下滚动和攻丝那是出了视口的元素并不会引发像它应该伪状态。所以，代替:active<!DOCTYPE html><html><body ontouchstart></body></html>将事件附加到所有元素，而不是依赖事件冒泡到正文（使用jQuery）：$('body *').on('touchstart', function (){});但是，我不知道这样做对性能的影响，因此请注意。编辑：此解决方案存在一个严重缺陷：即使在滚动页面时触摸某个元素也会激活:active伪状态。灵敏度太强。Android通过在显示状态之前引入很小的延迟来解决此问题，如果滚动页面，则可以将其取消。有鉴于此，我建议仅在选择的元素上使用它。就我而言，我正在开发一个供现场使用的Web应用程序，该应用程序基本上是用于导航页面和提交操作的按钮列表。因为在某些情况下整个页面几乎都是按钮，所以这对我不起作用。但是，您可以设置:hover伪状态来代替。禁用默认的灰色框后，这可以正常工作。
随时随地看视频慕课网APP
iOS
Html/CSS