近来做一个页面，在本人的android下完全没有问题，一到iphone下，那表现，点击一块，突然出现一个灰色的背景色，一闪而过，这个就奇怪了，
后来查了一下，发现IOS有个原生的属性-webkit-tap-highlight-color，IOS默认给所有可点击的元素（a元素或者任意点击有反应的元素，包括通过js设置的可点击的元素）都设置了这个属性，所以会出现半透明的灰色背景，当然要是取消掉，把这个属性设为透明就行，-webkit-tap-highlight-color: transparent;
这个属性在android也是生效的，如果我们需要一个按钮有这个点击高亮效果，就可以用这个属性了。
IOS的:active
今天产品提出要点击一块按钮，出现灰色透明蒙层，这让我想起了之前的那个效果，毫不犹豫的我加上了-webkit-tap-highlight-color：rgba(0,0,0,0.1),完美。
但是，产品不满意啊，你看android下是没问题，IOS下，点击这个，那个高亮的范围大了一圈呢，仔细一看，确实，点击一下，灰色范围确实会比点击区域略微大一点，好蛋疼，没办法，采用另一种方式实现吧，:active这个伪类多好，我们在active状态下加一个蒙层。
a:active:after{
content:'';
display:block;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
top:0;
left:0;
}
当然，ios下对这个:active的适配有点问题，需要我们先绑定touchstart事件，
或者
document.body.addEventListener('touchstart', function () {});
完美，android下完美实现，但是IOS下又出问题了，a链接无法跳转了，似乎是蒙层遮盖了链接。
研究下发现,a:active应该选择的是a链接的激活状态，也就是在你点击该链接之后，页面正在转向新地址的时候，链接显示此状态，
在移动端：active是在touchstart的时候触发，a链接的跳转则是click事件触发之后执行，移动端点击是事件的触发顺序是：touchstart –> touchmove -> touchend –> click，
经测试，在这个状态下，只触发了touchstart,touchmove和touchend，click并没有被触发，触发touchstart事件后，:after元素覆盖了a标签，并拦截了click事件。
这里要涉及IOS的一个bug，
在进行事件委托时，如果将未存在于DOM的元素事件直接委托到body上的话,会导致事件委托失效，调试结果为事件响应到body子元素为止，既没有冒泡到body上，也没有被body所捕获。但如果事件是DOM元素本身具有的，则不会触发bug。换而言之，只有元素的非标准事件（比如click事件之于div）才会触发此bug
简单的说就是，当使用委托给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的（如 div, span 等），此时 click 事件会失效。
在IOS下，点击在:after浮层上的click事件失效了，所以没有触发，android下则是可以。
总之，在移动端的click事件有点问题，建议还是用touch代替。
然后我在网上发现另一种解决方法，利用box-shadow属性，内阴影，扩展到里面的全部，这样解决上上面无法跳转的问题，相对也比较简单。
a:active{
box-shadow: inset 0 0 1000px rgba(0, 0, 0, .5);
}
