active的问题

首先active是什么？

:active 伪类向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。 ---w3cSchool

在移动web端，可理解为手指按下，但并未弹出系统菜单的这段过程。

经测试(荣耀6plus，iPhoneSE)， active在Andriod和IOS上的表现行为不一致，其他手机暂时未测。

<style>    
     html *{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline:none;-webkit-user-select:none; /*webkit浏览器*/  user-select:none;}
    .link{display:block;width:100%;height:50px;line-height:50px; -webkit-touch-callout:none;}
    .link:active{background-color:#ccc;}
    .link + .link{margin-top:10px;}
</style>  

//a标签的active
<a class="link" href="javascript:;">a标签</a>

//li标签的active
<ul><li class="link">li标签</li></ul>

//div标签的active
<div class="link">div标签</div>

在Andriod的UC和微信中，a、li、div标签的 active 都有效。

但是在 IOS 的 微信 和 safari 中都无效，原因是因为 Safari Mobile 默认不使用:active 状态，除非元素上或上有一个touchstart 事件处理器。 -- MDN。

所以解决方案如下：

document.body.addEventListener('touchstart', function () {});

给body或者DOM元素上添加一个touchstart事件，函数为空即可。

用这种方案，Andriod和IOS系统上的UC和微信，DOM元素就都会有active效果了。