Jes*_*sak 103 css iphone webkit mobile-safari pseudo-class
在iPhone/iPad/iPod上的Webkit中,<a>当您点击元素时,不会触发为标记指定样式:活动伪类.我该如何触发？示例代码:
<style>
a:active {
background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>
wil*_*age 230
<body ontouchstart="">
...
</body>
应用一次,而不是每个按钮元素似乎修复页面上的所有按钮.或者,您可以使用名为" Fastclick "的小型JS库.它可以加快触摸设备上的点击事件并处理这个问题.
use*_*216 49
正如其他答案所述,iOS Safari不会触发:active伪类,除非触摸事件附加到元素,但到目前为止这种行为一直是"神奇的".我在Safari开发者库中找到了这个小小的模糊解释它(强调我的):
您还可以将
-webkit-tap-highlight-colorCSS属性与设置触摸事件结合使用,以将按钮配置为与桌面类似.在iOS上,鼠标事件发送得如此之快,以至于永远不会收到关闭或活动状态.因此,:active只有在HTML元素上设置了触摸事件时才会触发伪状态 - 例如,在元素上设置ontouchstart时,如下所示:Run Code Online (Sandbox Code Playgroud)<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通过在显示状态之前引入非常小的延迟来解决此问题,如果页面滚动则会取消.鉴于此,我建议仅在选择元素上使用它.就我而言,我正在开发一个在该领域使用的网络应用程序,它基本上是一个按钮列表,用于导航页面和提交动作.因为在某些情况下整个页面几乎都是按钮,这对我来说不起作用.但是,您可以设置:hover伪状态来填充此内容.禁用默认灰色框后,这非常有效.
Jes*_*sak 39
在<a>标记中为ontouchstart添加事件处理程序.这会导致CSS神奇地工作.
<a ontouchstart="">Click me</a>
这对我有用:
document.addEventListener("touchstart", function() {},false);
注意:如果您执行此操作,还可以使用以下CSS规则删除Mobile Safari应用的默认点击突出显示颜色.
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
截至 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解决方法。）
小智 5
//hover for ios
-webkit-tap-highlight-color: #ccc;
这对我有用，将 CSS 添加到您想要突出显示的元素上
| 归档时间： |
|
| 查看次数： |
82493 次 |
| 最近记录： |