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

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


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


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


        写法:

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


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


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


        写法:

                <meta name="viewport" content="user-scalable=no">

                <meta name="viewport" content="initial-scale=1,maximum-scale=1">


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


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

        

        写法:


                <script src="<a href="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js">

                    

            首先在页面中引用js,然后在js中添加


            

                      if ('addEventListener' in document) {

                          document.addEventListener('DOMContentLoaded', function() {

                              FastClick.attach(document.body);

                          }, false);

                      }


原理: 在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉

                

关键词:
返回列表

相关文章

相关案例