hammer.js的六大事件

1、Pan事件：在指定的dom区域内，一个手指放下并移动事件，即触屏中的拖动事件。这个事件在触屏开发中比较常用：

Panstart 拖动开始

Panmove 拖动过程

Panend 拖动结束

Pancancel 拖动取消

Panleft 向左拖动

Panright 向右拖动

Panup 向上拖动

Pandown 向下拖动

2、Pinch事件： 在指定的dom区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时的事件：

Pinstart 多点触控开始

Pinchmove 多点触控过程

Pinchend 多点触控结束

Pinchcancel 多点触控取消

Pinchin 多点触控时两手指距离越来越近

Pinchout 多点触控时两手指距离越来越远

3、Press事件：在指定的dom区域内触屏版本的点击事件，这个事件相当于PC端的click事件，该事件不能包含任何的移动，最小按压时间为500毫秒，常用于手机上的复制、粘贴等功能：

Pressup 点击事件离开时触发

4、Rotate事件：在指定的DOM区域内，当两个手指或更多手指成原型旋转时触发（就像两个手指拧螺丝）：

Rotatestart 旋转开始

Rotatemove 旋转过程

Rotateend 旋转结束

Rotatecancel 旋转取消

5、Swipe事件：在指定的dom区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件：

Swipeleft 向左滑动

Swiperight 向右滑动

Swipeup 向上滑动

Swipedown 向下滑动

6、Tap事件：在指定的dom区域内，一个手指轻拍或点击时触发该事件，该事件最大点击时间为250毫秒，超过这个时间按Press事件进行处理。

关于Tap与Click

在安卓触屏上，Tap事件和Click事件可以同时触发，但click事件会有几百毫秒的延迟，即先触发Tap事件，过一段时间再触发click事件。

关于某些事件监听不能触发的问题（比如swipeup）

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

hammertime.add(new Hammer.Swipe());

hammertime.on(“swipeup”,function() {…})

Hammer.JS在创建一个新对象时默认会添加些常用事件，但不是全部事件，有些没有默认添加的事件需要单独做监听，就像上面的代码中展示的一样。

当一个对象需要多个事件时，经官方api和测试结果，需要对一个事件添加多个监听：

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

hammertime.add(new Hammer.Swipe());

hammertime.on(“swipeup”, function(){…});

var hammertime1 = new Hammer(document.getElementById(“test”));

hammertime.on(“swipeleft”,function(){…});

最后一段存疑，经过我的测试，在一个hammertime上可以监听多个事件，效果与上面代码一样。

一段合适的示例代码：

<style>
#myElement {
  background: silver;
  height: 300px;
  text-align: center;
  font: 30px/300px Helvetica, Arial, sans-serif;
}
</style>
<div id="myElement"></div>
<script>
var myElement = document.getElementById('myElement');
// create a simple instance
// by default, it only adds horizontal recognizers
var mc = new Hammer(myElement);
// listen to events...
mc.on("panleft panright tap press", function(ev) {
    myElement.textContent = ev.type +" gesture detected.";
});
</script>