首页 > web前端 > css教程 > 为什么 :active 伪类在 Mobile Safari 的 元素上不起作用,如何修复它?

为什么 :active 伪类在 Mobile Safari 的 元素上不起作用,如何修复它?

Susan Sarandon
发布: 2024-11-30 02:54:14
原创
848 人浏览过

Why Doesn't :active Pseudo-Class Work on Mobile Safari's <a> 元素,以及如何修复它?
元素,以及如何修复它? " />

:Mobile Safari 中的 active 伪类不活动

问题:

在 iOS 浏览器中,为 :active 伪类指定样式当点击元素时, 元素的类无法激活 iPhone 上基于 WebKit 的浏览器中会出现此问题。 iPad 和 iPod。

代码示例:

<style>
  a:active {
    background-color: red;
  }
</style>

<!-- snip -->
<a href="#">Click me</a>
登录后复制

解决方案:

在 Mobile Safari 中解决此问题,将 ontouchstart 事件监听器应用到

上。元素:
<body ontouchstart="">
  ...
</body>
登录后复制

此全局事件监听器增强了页面上所有按钮的响应能力。

替代解决方案:

另一种方法是利用 Fastclick JavaScript 库:

<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
<script>
  FastClick.attach(document.body);
</script>
登录后复制

Fastclick 可以加速触摸设备上的点击事件,解决了 :active 伪类问题。

以上是为什么 :active 伪类在 Mobile Safari 的 元素上不起作用,如何修复它?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板