youngwind commented 8 years ago

问题

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

解决方案之：Hammer.js

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

支持移动端各种复杂的手势，比如长按、旋转等等
解决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>

效果

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

PS：hammer作为一个著名的手势库，它也有对应封装的jquery版和vue版。

catjam commented 7 years ago

touchstart 不行吗

ivanberry commented 6 years ago

 <meta name="viewport" content="width=device-width">

不是也可以嘛？

youngwind / blog

利用hammer.js解决300ms延时 #77

问题

解决方案之：Hammer.js

效果