hammerJs 快速使用---入门教程

hammerJs 是一个js的移动端手势监控插件，它可以实现对移动端的点击、滑动、拖动和长按等手势监控。

hammer 初始化：

基本的文档结构如所示：

<div id='hammerTest'>
   ……
</div>

创建手势对象：

var hammerTest = new Hammer(document.getElementById("hammerTest"));

为手势对象绑定事件：

hammerTest.on("pan", function (el) {
   console.log('这里是手势响应事件');
});

hammer支持的手势事件主要为以下的几种：

• pan（滑动事件）

事件触发：当手指按下，并向指定方向滑动时触发（指定方向可以是：panleft、panright、panup、pandown）

• tap（点击事件）

事件触发：手指快速点击事件，该事件可以用于替换 ‘click’ 事件，移动端 ‘click’ 容易与 ‘press’ 长按事件混淆，所以hammer提供                 了 ‘tap’ 事件，在hammer框架内，按压时间低于 ‘300ms’ 的视为点击事件 ‘tap’ ，高于 ‘300ms’ 视为长按事件 ‘press’。 

• press（长按事件）
  

事件触发：手机按压保持 ‘300ms’ 以上触发

• pinch（缩放事件）

事件触发：当两个手指或以上的多个手指，在屏幕上相互靠近或是远离是触发。‘pinch’事件默认是关闭的，如果需要使用的话    请执行下列代码片段。

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

• swipe(快速滑动事件)

事件触发：当手指快速向一个指定的方向滑动足够的距离触发。指定方向： swipeleft、swiperight、swipeup、swipedown

• rotate（旋转事件）

事件触发：多个手指在按压平时的状态下旋转，旋转事件默认为关闭，使用时请执行下列代码段。

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

知道这些你就可以快速的使用hammer插件来实现你的手势监控了。

如想更深入的了解hammer的实现以及使用技巧，可关注博主。

另一种方式，你可以前往hammer官网查看官方英文文档：http://hammerjs.github.io/recognizer-rotate/