IOS active 状态失效问题

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 空方法（页面首个元素起作用）

• 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 空事件

Click me

• 所有a元素添加 touchstart 空事件

var a=document.getElementsByTagName(‘a’);
for(var i=0;i

参考文档

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