IOS 这个坑货

1,676 阅读3分钟
原文链接: www.hughhe.cn

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