咨询电话:
15628812133
15
2019/06

消除移动端中300ms点击延迟

发布时间:2019-06-15 10:09:19
发布者:神棍子
浏览量:
0

    在一般的情况下,移动端浏览器监听点击事件的时候都存在一个300ms的点击延迟,也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是等待一段时间才会出现点击的效果。这个问题来自于双击事件,因为在移动端中存在双击缩放的操作,例如当你点击一个跳转链接标签的时候,浏览器不能直接判断你是想要立即跳转,还是要缩放页面,所以就存在了一个300ms的延迟,如果在延迟内再次点击便会缩放,否则便会跳转。


     而现在这300ms的点击延迟就变得非常鸡肋,直接就影响到了页面之间切换的流畅性,所以就要想办法消除这300ms的延迟


    第一种办法就是在css中增加属性:touch-action


        写法:

               * {                    touch-action: none; /*当触控事件发生在元素上时,不进行任何操作*/                }


    直接将所有的其他手势事件全都禁用掉,便能达到消除延迟的目的,但是这个属性在很多浏览器中都存在不兼容的问题,而且当设置完这个属性之后,页面的滚动也会随之被禁用,慎用。


    第二种办法是在head中增加meta链接禁用缩放


        写法:

                

                


    意为将页面设置为无法缩放,所以就是禁用掉了双击缩放的功能,从而达到消除延迟的目的。


    以上方法在ios端都无法实现消除延迟的目的,fastclick便能完美兼容各种浏览器

        

        写法: