移动脚本框架Hammer.js

一、前言

移动终端的框架还处于起步阶段，但与移动终端的应用相比已经有很长一段时间了。虽然PC端的发展需求暂时没有那么大，但移动端的Web化必然是趋势。在手机端触摸剧本的过程中，首先想到的是juqery。Jquery2.0及以上版本已经开始偏向移动终端，比如h5支持，但支持还不完善，所以希望jq能在以后的版本中逐步得到支持。

最初在开发移动Web的时候，我们使用了w3c标准的语法结构和原生js开发，但是开发量比较大，每一步都要考虑各种移动浏览器的兼容性，就像让程序员头疼的大wp手机，很多事件都向w3c申请单独的标准。因此，良好的兼容性架构可以为开发人员节省大量工作。

第一次接触移动框架的时候，也问过一些从事过前端的朋友，大部分都在百度阿里工作过。在咨询了大家的建议后，我们使用了zepto.js(很多前端朋友应该都很熟悉)。这个框架有一个很大的问题，就是和wp手机不兼容。用zepto.js开发项目后，总觉得调整wp手机的兼容性“不值得蜡烛”。后来咨询了一些朋友，他们公司在开发的时候基本放弃了wp的兼容性(只能对wp说“呵呵”)。后来参考了那些用hammer.js开发的，经过研究，hammer.js轻量级，封装性好。使用起来也很方便。兼容性也不错。但是网上中文资料很少，在花园里写锤子的人就更少了。因此，就有了这篇文章。

本文基于hammer.js官网：http://hammerjs.github.io/,版本基于v2.0.4如果本文的api已经过期，请自行在官网查看最新的api。这篇文章只适合初学者。

二、什么是hammer.js

Hammer.js是一个开源的移动脚本框架，可以完美实现移动终端上开发的大部分事件，如点击、滑动、拖动、多点触控等。不需要依赖其他任何框架，整个框架很小。\使用起来非常简单，代码示例如下：

div id=' test ' class=' test '/div script type=' text/JavaScript '/创建一个新的hammer对象，并指定初始化期间要处理的dom元素var hammer time=new hammer(document . getelementbyid(' test ')；//指定触摸屏移动事件hammertime.on ('pan '，function (ev) {//console输出console . log(ev)；});/脚本三。事件架构

Hammer.js主要监控触摸屏的六大事件。如下图所示：

1.平移事件：手指在指定的dom区域中下落和移动的事件，即触摸屏中的拖动事件。这个事件常用于屏幕触控开发，比如：左拖、右拖等。比如在使用QQ时，向右滑动会有功能菜单的效果。该事件还可以监视和处理以下事件：Panstart:拖动开始，Panmove:拖动过程，Panend:拖动结束，Pancancel:拖动取消，Panleft:向左拖动，Panright:向右拖动，Panup:拖动到顶部，Pandown:拖动到底部。

2.Pinch事件：两个手指(默认为两个手指，多指触摸需要单独设置)或多个手指在指定dom区域内相对移动(越来越近)或相对移动(越来越远)的事件。分别对以下事件进行监控和处理：Pinchstart:多点触控开始，Pinchmove:多点触控过程，Pinchend:多点触控结束，Pinchcancel:多点触控取消，Pinchin:多点触控时两指距离越来越近，Pinchout:多点触控时两指距离越来越远。

3.按压事件：触摸屏版本在指定dom区域的click事件，相当于PC端的Click事件。它不能包含任何运动，最小按压时间为500毫秒，常用于我们在手机上使用的“复制粘贴”功能。事件分别监控和处理以下事件：按up:点击事件离开时触发。

4.旋转事件：在指定的dom区域，当两个手指或多个手指在一个圆内旋转(就像两个手指拧螺丝一样)时触发。事件分别监视和处理以下事件：Rotatestart:Rotatemove:Rotateend:Rotatecancel:Rotatecancel。

5.滑动事件：在指定的dom区域，手指在触摸屏上快速滑动。也就是说，我们通常使用最多的滑动事件。左扫：左扫，右扫：右扫，右扫：右扫。

6.点击事件：在指定的dom区域中，当手指点击或点击(类似于在电脑上点击)时，会触发此事件。此事件的最大点击时间为250毫秒。如果超过250毫秒，它将被处理为按下事件。

经验分享：写这个事件的时候，一定有人会问，我们不能在触摸屏上用Click事件吗？这个点击事件和点击事件有什么区别？博主曾经有过这样的疑惑。一开始在处理触摸屏上的点击时，他们一直使用点击事件，没有问题。直到有一天，他们为一家公司制作了微信版的“连连看”游戏。连连看的业务简单来说就是屏幕上有很多图片。点击两张图案相同的图片时，中间会产生一条连线，爆破效果后会消失。游戏一开始在ff浏览器上测试，点击鼠标后效果非常流畅。但是，当游戏部署到服务器，在手机上运行时，iphone和wp都非常流畅，无论怎么调，安卓都卡住了。一开始我以为是手机的性能问题，但是换了高配手机之后，还是会出现卡壳的情况，游戏要么无法玩，要么反应慢。经过多次测试，排除了手机配置的硬件原因，怀疑是点击事件。网上查了一下，知道在安卓触摸屏上可以同时触发Tap事件和click事件，但是click事件会有几百毫秒的延迟，也就是先触发Tap事件，后触发click事件。后来自然解决了将游戏的所有点击事件修改成Tap事件的问题。

四.使用示例

1、潘

代码如下

！DOCTYPE html html head meta name=' viewport ' content=' width=device-width '/title pan/title Script src=' http :/Script/hammer . js '/Script style type=' text/CSS ' html，body { width : 100%；高度： 100%；margin: 0pxpadding: 0px} .测试{ width : 100%；高度：50%；背景# ffd800文本-左对齐：} .结果{ width : 100%；高度：50%；背景技术# b6ff00文本-左对齐：}/style/head body div id=' test ' class=' test '事件区域/div div id=' result ' class=' result '事件结果br//div脚本类型=' text/JavaScript'/创建一个新的hammer对象并指定dom元素var hammer time=new hammer(文档。要在初始化期间处理的getelementbyid(' test ')；//添加事件hammertime.on ('pan '，函数(e){ document . getelementbyid(' result ')。innerhtml=' x偏移量：['e.deltaX']，y偏移量：[' e . deltay ']br/'；//控制台输出console . log(e)；});/script /body /html的效果如下：

2、捏

代码如下：

！DOCTYPE html html head meta name=' viewport ' content=' width=device-width '/title pinch/title Script src=' http :/Script/hammer。js '/Script样式类型=' text/CSS ' html，正文{宽度： 100%；高度： 100%;margin: 0pxpadding: 0px}。测试{宽度： 100%；高度： 50%;背景# ffd800文本-左对齐：} .结果{宽度： 100%；高度： 50%;背景技术# b6ff00文本-左对齐：}/style/head body div id=' test ' class=' test '事件区域/div div id=' result ' class=' result '事件结果：捏合触发br///div脚本类型='text/javascript' //创建一个新的铁锤对象并且在初始化时指定要处理的数字正射影像图元素var Hammer时间=新Hammer(文档。getelementbyid(' test ')；//为该数字正射影像图元素指定触屏移动事件锤子时间。添加（新锤子pinch())；//添加事件hammertime.on('pinchin '，函数{文件。getelementbyid(' result ').innerHTML='捏合初触发br/'；//控制台输出控制台。日志(e)；});/脚本/正文/html效果如下：

3、按压

代码如下：

！DOCTYPE html html head meta name=' viewport ' content=' width=device-width '/title press/title Script src=' http :/Script/hammer。js '/Script样式类型=' text/CSS ' html，正文{宽度： 100%；高度： 100%;margin: 0pxpadding: 0px}。测试{宽度： 100%；高度： 50%;背景# ffd800文本-左对齐：} .结果{宽度： 100%；高度： 50%;背景技术# b6ff00文本-左对齐：}/style/head body div id=' test ' class=' test '事件区域/div div id=' result ' class=' result '事件结果：按压超过500毫秒触发br///div脚本类型='text/javascript' //创建一个新的铁锤对象并且在初始化时指定要处理的数字正射影像图元素var Hammer时间=新Hammer(文档。getelementbyid(' test ')；//添加事件hammertime.on('press '，function(e){ document。getelementbyid(' result ').innerHTML='超过500毫秒了br/'；//控制台输出控制台。日志(e)；});/脚本/正文/html效果如下：

4、旋转

代码如下：

！DOCTYPE html html head meta name=' viewport ' content=' width=device-width '/title rotate/title Script src=' http :/Script/hammer。js '/Script样式类型=' text/CSS ' html，正文{宽度： 100%；高度： 100%;margin: 0pxpadding: 0px}。测试{宽度： 100%；高度： 50%;背景# ffd800文本-左对齐：} .结果{宽度： 100%；高度： 50%;背景技术# b6ff00文本-左对齐：}/style/head body div id=' test ' class=' test '事件区域/div div id=' result ' class=' result '事件结果：旋转触发br///div脚本类型='text/javascript' //创建一个新的铁锤对象并且在初始化时指定要处理的数字正射影像图元素var Hammer时间=新Hammer(文档。getelementbyid(' test ')；//为该数字正射影像图元素指定触屏移动事件锤子时间。添加（新锤子旋转())；//添加事件hammertime.on('旋转'，函数{文件。getelementbyid(' result ').innerHTML='X '偏移量：【' e.deltaX '】，Y偏移量：【' e . deltay '】br/'；//控制台输出控制台。日志(e)；});/脚本/正文/html效果如下：

5、刷卡

代码如下：

！DOCTYPE html html head meta name=' viewport ' content=' width=device-width '/title swipe/title Script src=' http :/Script/hammer。js '/Script样式类型=' text/CSS ' html，正文{宽度： 100%；高度： 100%;margin: 0pxpadding: 0px}。测试{宽度： 100%；高度： 50%;背景# ffd800文本-左对齐：} .结果{宽度： 100%；高度： 50%;背景技术# b6ff00文本-左对齐：}/style/head body div id=' test ' class=' test '事件区域/div div id=' result ' class=' result '事件结果：向左滑动触发br///div脚本类型='text/javascript' //创建一个新的铁锤对象并且在初始化时指定要处理的数字正射影像图元素var Hammer时间=新Hammer(文档。getelementbyid(' test ')；//添加事件hammertime.on('swipeleft '，函数{文件。getelementbyid(' result ').innerHTML='X '偏移量：【' e.deltaX '】，Y偏移量：【' e . deltay '】br/'；//控制台输出控制台。日志(e)；});/脚本/正文/html效果如下：

6、标签

代码如下：

！DOCTYPE html html head meta name=' viewport ' content=' width=device-width '/title tap/title Script src=' http :/Script/hammer。js '/Script样式类型=' text/CSS ' html，正文{宽度： 100%；高度： 100%;margin: 0pxpadding: 0px}。测试{宽度： 100%；高度： 50%;背景# ffd800文本-左对齐：} .结果{宽度： 100%；高度： 50%;背景技术# b6ff00文本-左对齐：}/style/head body div id=' test ' class=' test '事件区域/div div id=' result ' class=' result '事件结果：点击触发br///div脚本类型='text/javascript' //创建一个新的铁锤对象并且在初始化时指定要处理的数字正射影像图元素var Hammer时间=新Hammer(文档。getelementbyid(' test ')；//添加事件hammertime.on('tap '，函数(e){ document。getelementbyid(' result ').innerHTML='点击触发了，长按无效br/'；//控制台输出控制台。日志(e)；});/脚本/正文/html效果如下：

上述的实例还是有所区别的。在少量事件和辐状的事件中，我们用了锤子时间。添加（新锤子pinch())；和锤子时间。添加（新锤子旋转())；而其他四个事件没有用，而是直接添加了事件的监听程序。原因在于，我们在新锤子(htmlElement)的时候，Hammer.js默认对平移、按压、滑动和标签事件进行了监听。但没有对少量和辐状的事件进行监听。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。