大多数基于触摸的浏览器设备,在点击时都会有个 300ms 的事件触发等待时间,做过 web app 开发的同学应该都遇到过这个情况,通过下面的5步可以轻松搞定这个延迟。


1、不要太纠结于此

是否能接受这 300ms 的时间延迟,往往取决于你的应用和目标受众,比如:如果是个内容为主,并且菜单较少的应用,那么用户在阅读上花费的事件远远大于在菜单上消耗的事件,这种 情况下 300ms 是完全可以接受的,并且没有 300ms 延迟的体验并不会好很多。分析你的应用判断是否需要解决这个不是问题的问题,在做正确抉择。


2、禁用缩放 (chrome 和 firefox)


在 chrome 和 firefox 的移动版本中,如果禁用了页面缩放,那么着 300ms 的延迟就会自动消失,具体代码如下:


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


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

但是这一方案在 safari 上并不起作用,还会降低有视觉或运动障碍用户的可访问性。


3、设置 viewport 的 device-width (chrome 32+)

在 chrome 32+ 中,如果设置了 viewport 的宽度小于或等于物理设备的宽度,那么也会达到禁用缩放的效果。


<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">

注意:这里的最大缩放比与上面meta中的值并不一致,这个是关键点。


4、使用指针事件 (IE10+)


微软已经针对触摸问题发布了具体的规范,例如:在你滚屏的时候 pointerup 事件并不会被触发。


这儿有一个非标准的 CSS 触摸 action 属性,它允许你移除特定元素或整个文档的触发延迟,而无需禁用缩放:


a, button, .myelements {

    -ms-touch-action: manipulation; /* IE10  */

    touch-action: manipulation;     /* IE11+ */

}

5、使用fastclick.js



FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之,FastClick 在检测到touchend事件的时候,会通过 DOM 自定义事件立即触发一个模拟click事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。使用方法如下。


      第一步:在页面中引入fastclick.js文件。

      第二步:在js文件中添加以下代码

      在 window load 事件之后,在body上调用FastClick.attach()即可。


window.addEventListener(function(){  

    FastClick.attach( document.body );  

},false );

如果你项目使用了JQuery,就将上面的代码改写成:


$(function() {    

    FastClick.attach(document.body);    

});  


6、使用 touchend 事件处理


不同于 click 和 touchstart,touchend 没有这个 300ms 的延迟,而是即时触发,你完全可以在 WebGL 或 canvase 游戏中进行实践,但是在web 页面中单单使用 touchend 并不一定靠谱.

1、如果用户在两个不同元素之间触发了 touchstart 和touchend,那么 click 不会被触发 .


2、如果用户触发了 touchstart,但是在touchend之前是一个长长的 touchmove 滚动, 那么 click 也不会被触发.


3、在站点上任然应该保留 click 事件以兼容那些非触摸设备,这是你就要考虑事件的重复触发问题.


在此处输入内容已有同行为我们封装了部分解决方法:


1、FastClick 来至于FT实验室的一个插件,仅仅只有10kb,但是能解决上面的2-4步.


2、Tappy 来自于Filament Group,仅仅1kb,概念上类似于上面的指针事件.


问题:当你为多个元素进行这些事件绑定时,有可能出现性能的损耗.


是否有完美的解决方案呢?


是否需要解决 300ms 在于自己的判断,300ms被设计出来是有特定的用途,上面的meta属性中进行了设定,在chrome和firefox下能起作用,希望其他厂商也能尽 快提供这类支持。touch-action: manipulation 这个css属性能把风险降到最低,虽然现在只有微软支持,但是作为W3C规范和HTML5test的一部分,因此也许我们并不需要等待太久。

---------------------

作者:ruanhongbiao

来源:CSDN

原文:https://blog.csdn.net/qappleh/article/details/80419204

版权声明:本文为博主原创文章,转载请附上博文链接!

Created with the Personal Edition of HelpNDoc: iPhone web sites made easy