近来做一个页面,在本人的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);
}