移动端手势事件 hammer.JS插件

一、引入hammer.JS

1.下载地址：http://download.csdn.net/detail/webxiaoma/9872249 
2.官网地址：http://hammerjs.github.io/examples/ 
3.CDN链接：http://hammerjs.github.io/dist/hammer.min.js

二、用法

1.首先我们先写一个出发事件的DOM元素

HTML:

   <style type="text/css">
       html, body {
           width: 100%;
           height: 100%;
           margin: 0px;
           padding: 0px;
       }

       .test {
           width: 100%;
           height: 100%;
           background: red;
           text-align: left;
           color:white;
       }

   </style>
  <div id="test" class="test"></div>

2.我们创建一个新的hammer对象并且在初始化时指定要处理的dom元素

var hammertime = new Hammer(document.getElementById("test"));

3.为该dom元素指定触屏移动事件

hammertime.on("press", function (e) {                    document.getElementById("result").innerHTML += "按压超过500ms了";

});

三、注意点 重点内容

1.推荐使用视口元标记，通过禁用双引号/缩小缩放功能，可以更好地控制网页。

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

2.水平 pan和swipe和多点触控pinch和rotate识别。默认情况下，压缩和旋转识别器将被禁用，因为它们会使元素阻塞，但您可以通过调用以下方式启用它们： 
①方法一：

 hammertime.add(new Hammer.Pinch());
 hammertime.add(new Hammer.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 });

启用成功后在去调用该事件，否则该事件可能不会触发。 
另外我们也可以使用 remove(事件) 移除某个事件

hammertime.remove(‘rotate‘); // 移除旋转手势事件

四、提供的事件

1、点击事件（也就是常说的tocuh事件）

panstart 单手指按下时事件 
panmove 单手指移动时事件 
panend 单手指离开时事件 
pancancel 手势事件被移除是触发 
panleft 单手指向下左滑动时触发 
panright 单手指向右滑动时触发 
panup 单手指向上滑动时触发 
pandown 单手指向下滑动时触发

2.缩放事件 （需要手动开启 ammertime.get(‘pinch‘).set({ enable: true });）

pinch 手指缩放触发 
pinchstart 手指缩放开始时触发 
pinchmove 手指缩放时触发 
pinchend 手指缩放结束后触发 
pinchcancel 手指缩放事件被清除时触发 
pinchin 手指向内缩放时触发 
pinchout 手指向外缩放时触发

3.按压(长按)事件

press 手指按压时触发（默认按压251毫秒） 
pressup 手指按压结束时触发

4.旋转事件 (两个手指)

rotate 旋转触发 
rotatestart 旋转开始时触发 
rotatemove 旋转时触发 
rotateend 旋转结束时触发 
rotatecancel 旋转被移除时触发

5.滑屏事件

swipe 滑屏触发 
swipeleft 左滑屏时触发 
swiperight 右滑屏时触发 
swipeup 上滑屏时触发 
swipedown 下滑屏时触发

小提示：当调用Hammer()创建一个简单的实例时，平移和滑动识别器被配置为仅检测水平手势。你需要这样去在垂直方向去配置：

hammertime.get(‘swipe‘).set({ direction: Hammer.DIRECTION_ALL });

6.tap点击事件

tap 点击事件 
doubletap 双击触发

重点内容 
以上事件中我们可以改变事件的默认状态，比如按压事件默认是251毫秒触发，我们可以改为1s后触发。

hammertime.get(‘press‘).set({ time:1000 });

五、事件对象

每个事件都存在事件对象：

hammertime.on("doubletap", function (e) {

   document.getElementById("result").innerHTML += e;
     var a = console.log(e);

});

事件对象中包含以下信息： 
Hammer触发的所有事件都会接收到包含以下属性的事件对象。