a:active在ios上无效解决方法
原因:
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>.
解决方法:
1.body标签上添加ontouchstart空方法(页面首个元素起作用)
<body ontouchstart=""> </body>
2.document或body添加touchstart空事件(页面首个元素起作用)
document.addEventListener("touchstart", function() {},false); //或 document.body.addEventListener("touchstart", function() {})
1 2 3 4 | /*添加如下css配合*/ html { -webkit-tap-highlight- color : rgba( 0 , 0 , 0 , 0 ); } |
3.单个a元素添加ontouchstart空事件
<a ontouchstart="">Click me</a>
4.所有a元素添加touchstart空事件
var a=document.getElementsByTagName(‘a’); for(var i=0;i<a.length;i++){ a[i].addEventListener(‘touchstart’,function(){},false); }
参考:https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
http://blog.csdn.net/freshlover/article/details/43735273
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步