利用hammer.js解决300ms延时

@youngwind 2016-07-10 05:44:51发表于 youngwind/blog 移动H5

问题

在移动端的web上存在这样一个问题:你给某个元素绑定上click事件,当你点击这个元素的时候,事件将在300ms之后才得以执行。这就是所谓的300ms延时问题,此问题的历史原因可参考这里。在若干年前300ms可能用户不会怎么介意,但是在如今的形势下,300ms显然已经会让用户感觉到明显的迟钝了,所以这个问题必须得解决。

解决方案之:Hammer.js

上面的连接提供了若干种的解决方案。
不过,目前我用的是:Hammer.js
Hammer.js常常有两个用途:

  1. 支持移动端各种复杂的手势,比如长按、旋转等等
  2. 解决300ms延时问题

不过,在hybrid app的开发理念中,复杂的手势往往意味着复杂的交互。对于复杂的交互,往往更倾向于采用native去实现,因为这样能获得更好的性能和体验。所以,hammer.js最一般的用途就是解决300ms延时。下面我们来写一个demo证明:用hammer.js的tap事件代替原生的click,能够消除300ms延时。

// html
<div id="test">点我</div>
<div id="tap"></div>
<div id="click"></div>
// js
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./hammer.js"></script>
<script>
       // 利用hammer绑定tap事件
        var hammertime = new Hammer(document.getElementById("test"),{});
        hammertime.on('tap', function(ev) {
            $('#tap').html('hammer封装tap事件触发时间戳:' + new Date().getTime());
        });

    //  绑定click事件
    $("#test").click(function () {
        $('#click').html('原生click事件触发时间戳:' + new Date().getTime())
    })
</script>

效果

从下图可以明显观察到区别。

image

PS:hammer作为一个著名的手势库,它也有对应封装的jquery版vue版