解决ios不支持按钮:active伪类的方法

 mozilla开发社区上有 :active 不起作用的答案:

[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>.

在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。

document.body.addEventListener('touchstart', function () { //...空函数即可 });  

将上述事件监听代码加上后,Safari Mobile上就可以看到按钮按下后的切换效果了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Youngxj

CSS3随机背景图片切换特效

89460
来自专栏天天

微信小程序 自定义组件样式

组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:

75620
来自专栏禅林阆苑

前端拾零01—checkbox&radio&select总结

前端拾零收录日常开发中一些很常见很基础的前端操作,省去每次google甚至答案错误的烦恼

2K660
来自专栏python3

tkinter -- Canvas(2)

Canvas 使用了 stack 的技术,新创建的 item 总是位于前一个创建的 item 之上,故调用above 时,它会查找 rt2上面的 item 为 ...

11530
来自专栏web前端

05移动端事件

一、移动端三大事件          1、手指按下     ontouchstart      2、手指触摸     ontouchmove          ...

21450
来自专栏姬小光

【第012期】如何设置页面锚点

不知道大家有没有注意到,在我们上网的时候,会看到有些链接打开之后可以直接定位到页面的某个位置处。

15930
来自专栏Spring相关

Vue中webpack的Style的lang和Scoped属性

修改goods.vue中的style我们会发现到goods的时候回影响到其他的div样式,添加scoped作用域可以解决这个问题,如下:

33420
来自专栏React Native开发圈

React Native 圆形进度条组件

npm i--save react-native-circular-progress

19410
来自专栏搞前端的李蚊子

微信小程序监听input输入并取值

小程序的事件分为两种,冒泡和非冒泡事件,像<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件等非...

49970
来自专栏cnblogs

bootstrap源码分析之tab(选项卡)

实现tab选项卡的应用,此插件相对比较简单 源码文件: tab.js 实现原理 1、单击一个元素时,首先将原来高亮的元素取消 2、然后给被单击元素进行高亮 3...

25980

扫码关注云+社区

领取腾讯云代金券