it-swarm.dev

:active pseudo-class在移动safari中不起作用

在iPhone/iPad/iPod上的Webkit中,当您点击元素时,不会触发为<a>标记指定样式:active伪类。我该如何触发?示例代码:

<style> 
a:active { 
    background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>
92
Jesse Rusak
<body ontouchstart="">
    ...
</body>

应用一次,而不是每个按钮元素似乎修复页面上的所有按钮。或者你可以使用这个名为' Fastclick '的小JS库。它可以加快触摸设备上的点击事件并处理这个问题。

217
wilsonpage

正如其他答案所述,iOS Safari不会触发:active伪类,除非触摸事件附加到元素,但到目前为止这种行为一直是“神奇的”。我在 Safari开发者库中找到了这个小小的模糊 它解释了它(强调我的):

您还可以将-webkit-tap-highlight-color CSS属性与设置触摸事件结合使用,以将按钮配置为与桌面类似。 在iOS上,鼠标事件发送得如此之快,以至于永远不会收到关闭或活动状态。 因此,只有在HTML元素上设置了触摸事件时才会触发:active伪状态 - 例如,在元素上设置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 CSS属性来禁用iOS使用的默认灰色半透明框来代替-webkit-tap-highlight-color伪状态,如同一个链接中所述上面的页面。)


经过一些实验,在<body>元素上设置ontouchstart事件的预期解决方案所有触摸事件然后冒泡到不能完全工作。如果元素在页面加载时在视口中可见,那么它工作正常,但向下滚动并点击一个超出视口的元素会触发:active伪状态,就像它应该的那样。所以,而不是

<!DOCTYPE html>
<html><body ontouchstart></body></html>

将事件附加到所有元素,而不是依赖于冒泡到正文的事件(使用jQuery):

$('body *').on('touchstart', function (){});

但是,我不知道这对性能的影响,所以要小心。


编辑: 这个解决方案有一个严重的缺陷:在滚动页面时触摸元素会激活:active伪状态。灵敏度太强了。 Android通过在显示状态之前引入非常小的延迟来解决此问题,如果页面滚动则取消该延迟。鉴于此,我建议仅在选择元素上使用它。就我而言,我正在开发一个在该领域使用的网络应用程序,它基本上是一个用于浏览页面和提交动作的按钮列表。因为在某些情况下整个页面几乎都是按钮,这对我来说不起作用。但是,您可以设置:hover伪状态来填充此字段。禁用默认灰色框后,这非常有效。

43
user128216

在<a>标记中为ontouchstart添加事件处理程序。这会导致CSS神奇地工作。

<a ontouchstart="">Click me</a>
39
Jesse Rusak

对我有用:

document.addEventListener("touchstart", function() {},false);

注意:如果您执行此操作,还可以使用以下CSS规则删除Mobile Safari应用的默认点击突出显示颜色。

html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
7
dhqvinh

截至2016年12月8日,接受的答案(<body ontouchstart="">...</body>)在Safari 10(iPhone 5s)上对我不起作用:该hack仅适用于页面加载时可见的元素。

但是,添加:

<script type='application/javascript'>
  document.addEventListener("touchstart", function() {}, false);
</script>

head确实按我想要的方式工作,其缺点是现在滚动期间的所有触摸事件也会触发触摸元素上的:active伪状态。 (如果这对您来说是个问题,您可以考虑 FighterJet的:hover解决方法。)

4
Ali

您使用的是所有伪类还是仅使用伪类?如果您使用至少两个,请确保它们的顺序正确或者它们都会破坏:

a:link
a:visited
a:hover
a:active

..以该顺序。此外,如果您只是使用:active,请添加:link,即使您没有设置样式。

3
tahdhaze09
//hover for ios
-webkit-tap-highlight-color: #ccc;

这对我有用,可以在要突出显示的元素上添加CSS

3
Redeye

我发布了一个应该为您解决此问题的工具。

从表面上看问题看起来很简单,但实际上触摸和点击行为需要进行相当广泛的定制,包括超时功能和诸如“滚动链接列表时会发生什么”或“按下链接时会发生什么”之类的事情将鼠标/手指移离活动区域“

这应该立即解决所有问题: https://www.npmjs.com/package/active-touch

您需要将:活动样式分配给.active类或选择自己的类名。默认情况下,脚本将与所有链接元素一起使用,但您可以使用自己的选择器数组覆盖它。

诚实,有用的反馈和贡献非常感谢!

1
dmitrizzle

解决方案是依赖:target而不是:active

<style> 
a:target { 
    background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>

当锚点被当前URL定位时,将触发该样式,即使在移动设备上也是如此。缺点是你需要一个其他链接来清除网址中的锚点。完整的例子:

a:target { 
    background-color: red;
}
<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>
0
wasthishelpful

对于那些不想使用ontouchstart的人,可以使用此代码

<script>
 document.addEventListener("touchstart", function(){}, true);
</script>
0
Noob Dev