Hammer.js——移动设备触摸手势

简介

Hammer.js是一个轻量级的JavaScript库（仅有2kb），能让你的网站轻松实现触控事件。它依赖于jQuery，用来控制触摸设备上的多点触控特性。并支持以下特性：

• Tap
• Double Tap
• Hold
• Drag
• Transform

兼容性

Hammer.js已经在IOS5系统的iPad1，IOS5系统的iPhone，Android 2.3.3的三星Galaxy S以及Goolge Chrome 17测试可用。在桌面浏览器上鼠标能够模拟单个手指的触控事件。在Android 2与3 默认的浏览器以及FireFox 10不支持多点触控事件，所以在Android，FireFox 1.1（Nokia N900）上没有transform。Windows Phone 7.5不支持触摸事件，mouse event支持也很糟糕。

使用方法

hammer.js是一款开源的移动端脚本框架，他可以完美的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架，并且整个框架非常小，在使用时非常简单。

 1  <div id="test" class="test">div>
 2     <script type="text/javascript">
 3         //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
 4         var hammertime = new Hammer(document.getElementById("test"));
 5         //为该dom元素指定触屏移动事件
 6         hammertime.on("pan", function (ev) {
 7             //控制台输出
 8             console.log(ev);
 9         });
10 script>

它会默认为这个对象添加一系列识别器，包括 tap<点>, doubletap<双点击>, press<按住>, 水平方位的pan<平移> 和 swipe<快速滑动>, 以及多触点的 pinch<捏放> 和 rotate<旋转>识别器。不过呢，其中的 pinch 和 rotate 默认是不可用的，因为它们可能会导致元素被卡住，如果你想启用它们，可以加上这两句：

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

若要允许识别器识别垂直方位或全部方位的 pan 和 swipe，可以这么写：

hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

另建议加上如下meta标签，防止doubletap 或 pinch 缩放了viewport：

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

更多控制

你可以为你的实例设置属于你自己的识别器，虽然要多写一点代码，但能让你控制更多能被识别的手势：

var mc = new Hammer.Manager(myElement, myOptions);

mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );
mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) );

mc.on("pan", handlePan);
mc.on("quadrupletap", handleTaps);

上述的代码创建了一个实例（mc），它包含了一个 pan 和一个 quadrupletap 手势，识别器实例会在它们被添加（add）之后就不断地执行，且（一个识别器实例）只能识别一个（手势）。

官网：http://hammerjs.github.io/

GitHub：https://github.com/hammerjs/hammer.js/tree/master/

更多参数请见：http://www.cnblogs.com/vajoy/p/4011723.html