码迷,mamicode.com
首页 > 移动开发 > 详细

IOS active 状态失效问题

时间:2020-06-29 00:21:02      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:function   over   event   原因   def   not   文档   active   detail   

IOS active 状态失效问题

失效原因

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标签上添加 ontouchstart 空方法(页面首个元素起作用)
<body ontouchstart=""></body>
  • document 或 body 添加 touchstart 空事件(页面首个元素起作用)
document.addEventListener("touchstart", function() {},false);
// 或
document.body.addEventListener("touchstart", function() {})

添加如下css配合

html {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
  • 单个a元素添加 ontouchstart 空事件
<a ontouchstart="">Click me</a>
  • 所有a元素添加 touchstart 空事件
var a=document.getElementsByTagName(‘a’);
for(var i=0;i<a.length;i++){
    a[i].addEventListener(‘touchstart’,function(){},false);
}

参考文档

  1. https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
  2. http://blog.csdn.net/freshlover/article/details/43735273

IOS active 状态失效问题

标签:function   over   event   原因   def   not   文档   active   detail   

原文地址:https://www.cnblogs.com/GManba/p/13205514.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!